html – 像典型的表格设计一样排列字段集元素

概述我试图以与典型表格相同的方式排列3个fieldset元素的标题,但我无法按照我想要的方式获得它.这非常接近,但…… <label style="vertical-align:top;">Title1</label><fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle 我试图以与典型表格相同的方式排列3个fIEldset元素的标题,但我无法按照我想要的方式获得它.这非常接近,但……

<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>

我可能已经使用了表,如果有一种方法我不必在我的PHP代码中为Title和fIEldset元素运行if语句.另外,在漂亮的代码方面,使用fIEldset来实现我在这里所做的似乎是一个更好的选择.

对上述代码有什么建议吗？
澄清：http://anony.ws/di-FJKD.jpg

解决方法 你可以做的是从流中删除标签,使它们不与输入/文本垂直对齐..通过绝对定位它们来做这个…这将需要父元素有位置：相对;在它上面 – 我假设上面的整体代码是一个表单元素,但为了一个演示我只是将所有代码包装在一个div中.

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;}

根据评论添加

因为评论中没有足够的空间,这里是我想的代码没有定位标签的代码,要做到这一点,标签需要进入垂直对齐的字段集

#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 – 像典型的表格设计一样排列字段集元素全部内容，希望文章能够帮你解决html – 像典型的表格设计一样排列字段集元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。