像典型的表格设计一样排列字段集元素(Arranging fieldset elements like a typical table

像典型的表格设计一样排列字段集元素(Arranging fieldset elements like a typical table-design)

我试图以与典型表格相同的方式排列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

I'm trying to arrange the titles for 3 fieldset elements the same way a typical table looks, but I can't get it the way I want. This comes pretty close, however...

I may've used tables if there was a way I didn't have to run an if statement in my PHP code for both the title and the fieldset element. Plus, using fieldset for what I'm doing here seems to be a better alternative, in terms of pretty code.

Got any suggestions for anything similar to the code above? Clarification: http://anony.ws/di-FJKD.jpg

最满意答案

你可以做的是从流中删除label ，使它们不与输入/文本垂直对齐..通过绝对定位它们来做这个...这将需要父元素有position: relative; 在它上面 - 我假设上面的整体代码是一个form element但为了一个演示我只是将所有代码包装在一个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; }

根据评论添加

因为评论中没有足够的空间，这里是我想的代码没有定位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>

what you could do is remove the label's from the flow so they don't get vertically aligned with the inputs/text.. do this by absolutely positioning them.. this will require a parent element to have position: relative; on it - I presume the overall code above is in a form element but for the sake a demo I've just wrapped all your code in a div.

Working Example

HTML:

CSS:

added per comments

because there's not enough room in comments, here's the code I was thinking which doesn't position the label, to do this the label would need to go inside the vertically aligned fieldset

HTML:

更多推荐

fieldset,代码,vertical-align,电脑培训,计算机培训,IT培训"/> <meta name="de