我试图以与典型表格相同的方式排列3个fieldset元素的标题,但我无法按照我想要的方式获得它.这非常接近,但……
<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
解决方法
你可以做的是从流中删除标签,使它们不与输入/文本垂直对齐..通过绝对定位它们来做这个…这将需要父元素有位置：相对;在它上面 – 我假设上面的整体代码是一个表单元素,但为了一个演示我只是将所有代码包装在一个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;
}
因为评论中没有足够的空间,这里是我想的代码没有定位标签的代码,要做到这一点,标签需要进入垂直对齐的字段集
#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>
