像典型的表格设计一样布置字段集元素
|
我正在尝试以典型表格的外观排列3个字段集元素的标题，但我无法按照我想要的方式获得它。这非常接近，但是...
<label style=\"vertical-align:top;\">Title1</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" />
</fieldset>
<label style=\"vertical-align:top;\">Title2</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
<input value=\"Lorem Ipsum\" />
</fieldset>
<label style=\"vertical-align:top;\">Title3</label>
<fieldset style=\"display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;\">
Lorem Ipsum
</fieldset>
没有找到相关结果
已邀请:
2 个回复
旅牢斯讲
，以免它们与输入/文本垂直对齐。通过绝对放置它们来进行此操作。这将需要一个父元素在其上具有-我认为上面的总体代码在3英镑以内，但是为了演示起见，我只是将所有代码包装在div中。 工作实例 HTML：<div id=\"form\"> <label>Title1</label> <fieldset> <input value=\"Lorem Ipsum\" /><br /> <input value=\"Lorem Ipsum\" /><br /> <input value=\"Lorem Ipsum\" /> </fieldset> <label>Title2</label> <fieldset> <input value=\"Lorem Ipsum\" /> </fieldset> <label>Title3</label> <fieldset> Lorem Ipsum </fieldset> </div>#form { position: relative; /* labels need this on the their parent element */ } fieldset { margin: 0; padding: 0; border: 0; padding-top: 30px; /* leave a space to position for the labels */ } fieldset {display: inline-block; vertical-align: middle;} fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */} label { position: absolute; top: 5px; left: auto; margin-left: 5px; font-weight: bold; }需要放入垂直对齐的字段集中#form { position: relative; /* labels need this on the their parent element */ } fieldset { margin: 0; padding: 0; border: 0; } fieldset {display: inline-block; vertical-align: middle; background: #eee;} fieldset {display: inline !ie7;} label { display: block; font-weight: bold; }坝胺绣敝
.divTable { display: table; width: 50%; } .divRow { display: table-row; } .cellOne, .cellTwo { display: table-cell; padding: 20px; width: 30%; }<fieldset id=\"fileConnSet\"> <legend>File:</legend> <div class=\"divTable\"> <!--Table start--> <div class=\"divRow\"> <!--1st row, like <tr>--> <div class=\"cellOne\"> <!--1st column, like <td>--> <label>Name:</label> </div> <div class=\"cellTwo\"> <!--2nd column--> <input type=\"text\" /> </div> </div> <div class=\"divRow\"> <!--2nd row, like <tr>--> <div class=\"cellOne\"> <label>Age:</label> </div> <div class=\"cellTwo\"> <input type=\"text\" /> </div> </div> <div class=\"divRow\"> <!--3rd row, like <tr>--> <div class=\"cellOne\"> <label>Company:</label> </div> <div class=\"cellTwo\"> <input type=\"text\" /> </div> </div> </div> <!--Table end--> </fieldset>