Html 像典型的表格设计一样排列字段集元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6234299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arranging fieldset elements like a typical table-design
提问by Nisto
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...
我正在尝试以与典型表格相同的方式排列 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>
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.
如果有一种方法我不必在我的 PHP 代码中为标题和字段集元素运行 if 语句，我可能已经使用了表格。另外，就漂亮的代码而言，将 fieldset 用于我在这里所做的事情似乎是一个更好的选择。
Got any suggestions for anything similar to the code above? Clarification: http://anony.ws/di-FJKD.jpg
对与上述代码类似的任何内容有任何建议吗？澄清：http: //anony.ws/di-FJKD.jpg
采纳答案by clairesuzy
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 elementbut for the sake a demo I've just wrapped all your code in a div.
你可以做的是去除label从流量，使他们没有得到垂直输入/文本对齐的..这样做的绝对定位它们。这就需要一个父元素有position: relative;它-我相信整体上面的代码是在一个form element演示中，但为了演示，我刚刚将您的所有代码包装在一个 div 中。
Working Example
工作示例
HTML:
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:
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;
}
addedper 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 labelwould need to go inside the vertically aligned fieldset
因为注释中没有足够的空间，这是我正在考虑的代码，它没有定位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:
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>
回答by user1730990
Like this
像这样
.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>