1

我正在为这个看似简单的问题而烦恼，也许有人可以提供帮助。我想要任意数量的输入，带有标签，像图像中一样水平堆叠在一条线上。

在此处输入图像描述

4

4 回答 4

0

这种经典的“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等等用于指定列的宽度。

于 2012-11-06T19:19:39.467 回答
0

编辑：更新以解决固定宽度的标签。（任意设置为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 }

​</p>

​</p>

于 2012-11-06T19:39:51.617 回答
0

通常，当您想要“占用剩余空间”（例如您的输入框）时，您有 3 个选项：

  1. Flexbox，这将是理想的，但尚未得到广泛支持。
  2. 表格，如 Kevin Reids 回答中所解释的
  3. 建立单独的块格式化上下文，示例如下

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

仅添加了 1 个布局元素，即包装input. 这是因为input不想表现得像块元素，即使你告诉他这样做。

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

于 2012-11-07T09:44:42.617 回答
0

有很多方法可以解决这个问题。就个人而言，我喜欢使用表格来处理这种类型的数据（但如果不是表格数据，建议使用 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>

示例表 JSFiddle

使用 Div 稍微复杂一些，因为它们默认是内联的；你会得到你的标签在不同的行。您可以查看诸如“display: table-cell”之类的 CSS 属性以实现与上述相同的结果，否则您可以使用 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%。

于 2012-11-06T17:05:36.143 回答