问题描述
|
我正在尝试以典型表格的外观排列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>
如果没有必要在我的PHP代码中为title和fieldset元素运行if语句,我可能会使用表。另外,就漂亮的代码而言,将fieldset用于我在这里所做的事情似乎是更好的选择。
对上述代码有任何建议吗?
澄清:http://anony.ws/di-FJKD.jpg
解决方法
您可以做的是从流中删除
label
,以免它们与输入/文本垂直对齐。通过绝对放置它们来进行此操作。这将需要一个父元素在其上具有position: relative;
-我认为上面的总体代码在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>
CSS:
#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;
}
每个评论添加
因为注释中没有足够的空间,所以这是我在考虑的代码,该代码没有将ѭ1定位,要做到这一点,label
需要放入垂直对齐的字段集中
#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;
}
HTML:
<fieldset>
<label>Title1</label>
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" /><br />
<input value=\"Lorem Ipsum\" />
</fieldset>
<fieldset>
<label>Title2</label>
<input value=\"Lorem Ipsum\" />
</fieldset>
<fieldset>
<label>Title3</label>
Lorem Ipsum
</fieldset>
, 像这样
.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>