我正在尝试以与典型表格相同的方式排列 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 代码中为标题和字段集元素运行 if 语句,我可能会使用表格。另外,就漂亮的代码而言,将 fieldset 用于我在这里所做的事情似乎是一个更好的选择。
对与上述代码类似的任何内容有任何建议吗? 澄清:http://anony.ws/di-FJKD.jpg
最佳答案
你可以做的是从流程中删除 label
,这样它们就不会与输入/文本垂直对齐。通过绝对定位来做到这一点。这将需要一个父元素上有 position: relative;
- 我假设上面的整体代码在 form element
中,但为了演示我刚刚包装了所有代码在一个分区中。
Working Example
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;
}
根据评论
添加
因为没有足够的评论空间,这里是我在想的代码,它没有定位 label
,要做到这一点,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>
关于html - 像典型的表格设计一样排列字段集元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6234299/