Question

我对这个看似简单的问题感到不满，也许有人可以提供帮助。我希望任意数量的输入，带有标签，水平堆叠在一条线上，就像在图像中一样。

enter image description here

Answer 1

有很多方法可以解决这个问题。就个人而言，我喜欢使用表格来处理这类数据（但如果不是表格数据，建议使用其他方法，如DIV）。我将尝试展示一个表格的快速示例：

表：

<table width="100%" cellpadding="0" callspacing="0" border="0">
 <tr>
  <td width="200">LABEL 1</td><td>&nbsp;</td> <!-- this is the padding table cell -->
  <td width="200">LABEL 2</td><td>&nbsp;</td>
  <td width="200">LABEL 3</td><td>&nbsp;</td>
 </tr>
</table>

Example Table JSFiddle

使用Div稍微多一些，因为默认情况下它们是内联的;你会在不同的行上得到你的标签。您可以查看CSS属性，如“display：table-cell”，以获得与上述相同的结果，否则您可以使用CSS查看绝对和相对定位。

<div width="100%">
 <div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
 <div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
 <div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>

但是，由于假设您的布局是页面/浏览器查看区域宽度的100％，因此仍存在一些问题。

Answer 2

此类经典“GUI小部件布局引擎”布局的最佳选择是CSS 3 flexbox 功能，但浏览器支持还不够完整，我建议使用它。

缺席，灵活的“填充空间”布局通常需要表格布局。感谢CSS display，没有必要将表格作为HTML表格编写。以下示例与您的示例图像类似：

<html><head>
<title>example</title>
  <style type="text/css">
    ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
    .myform li { display: table-cell; border: .1em solid gray; }
    .myform li > * { display: table; width: auto; margin: .4em; }
    .myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
    .myform input { display: table-cell; width: 100%; }
    .col1 { width: 33%; }
    .col2 { width: 33%; }
    .col3 { width: 34%; }
  </style>
</head><body>
  <form>
    <ul class="myform">
      <li class="col1"><span><label for="a">Label</label>              <input id="a" name="a"></span></li>
      <li class="col2"><span><label for="b">Label</label>              <input id="b" name="c"></span></li>
      <li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
    </ul>
  </form>
</body></html>

只有一个元素仅用于标记中的布局：需要<span>作为表格单元格中的表格。

标签单元格的width: 1%;不是实际尺寸，而只是强制它尽可能地缩小（绝对而不是百分比，不会产生相同的效果）。 white-space: nowrap;会阻止标签因此而被包裹。

.col1等用于指定列的宽度。

Answer 3

编辑：已更新以解决固定宽度标签问题。（任意设置为100px）

http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/

HTML：

<div>
 <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
</div>

CSS：

div { width: 100%; } 
div div { 
    width: 33%; 
    background-color: salmon; 
    float: left; 
    position: relative
}
div div div { 
    background-color: pink; 
    position: relative; 
    z-index: 2
}
div div div:last-child { 
    background-color: red;  
    position: absolute; 
    width: 100%; 
    z-index: 1 
}
.label { width: 100px }

Answer 4

一般来说，当你想要某些东西时，要占用余下的空间＆＃34; （就像你的输入框一样）你有3个选择：

Flexbox，这将是理想的，但还没有广泛支持。
表格，如Kevin Reids回答
建立单独的Block Formatting Contexts，例如

HTML

<div class="container">
    <div class="field">
        <label for="in1">Label</label>
        <div><input type="text" id="in1"></div>
    </div>
    <div class="field">
        <label for="in2">Label</label>
        <div><input type="text" id="in2"></div>
    </div>
    <div class="field">
        <label for="in3">Label</label>
        <div><input type="text" id="in3"></div>
    </div>
</div>

CSS

.container {
    padding: 20px;
    background: #999;
    overflow: hidden; /* for float containment */
}

.field {
    padding: 4px;
    background: #fff;
    border: 2px solid #999;
    float: left;        
    width: 33%;
    -webkit-box-sizing: border-box; /* 33% effective width */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    float: left;
    width: 100px; /* fixed width of label */ 
}

.field div {
    overflow: hidden; /* create a new Block Formatting Context */ 
}

/* inputs fill the new BFC */
input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

只有一个添加的布局元素，它将是包裹input的div。这是因为input并不想表现得像块元素even if you tell him to do so。

小提琴：http://jsfiddle.net/RqzJC/

一行上几个框的HTML布局

4 个答案: