Question

我正试图打破桌上的拐杖......

我想在3个文本框中放置3个“标签”，“第一个”，“中间”和“最后”，以便标签位于相应的文本框上方，标签和文本框垂直对齐。换句话说，我需要一个3列表，其中第一行有3个标签，第二行有3个文本框，所有内容都是左对齐的，我希望所有列的宽度相同并固定。

如何使用仅使用CSS的w / o表来执行此操作？

我知道margin-left会让我在组之间保持一致的距离，但是如何使用Paragraph或break标签“回车”到下一行，因为所涉及的距离实际上是我想，字体不是能够“回车”指定数量的像素。

我知道display：block会把东西放在一个新的行上，但是会在之前和之后创建一个break。我只想在“之后”休息一下。

我希望我解释得很好。

感谢。

其他编辑：我明白也许我不应该避免使用表格来擅长表格的东西，但是如果CSS有一个属性analagos到margin-left：10px但在垂直方向上执行cariage返回后，使用CSS而不是表格的优势是我的标记中不会有一百万个TR和TD标签。

有这样的事吗？

Answer 1

您所做的就是以这种方式创建表单字段：

<div id="form">
  <div class="control">
    <div class="label">
      <label for="field1">Field 1</label>
    </div>
    <div class="field">
      <input type="text" name="field1" id="field1">
    </div>
  </div>
  ...
</div>

使用：

#form { overflow: hidden; } // this is important!
#form div.control { float: left; width: 33%; }

现在，如果其中一个标签较大，控件就不会排成一行，但这就是“纯粹”CSS落入哪些表可以轻松自然地做的短路的例子，这就引出了一个问题：为什么你要给在桌子上？

注意：沿着同一行的另一个答案建议不要将标签和输入包装在div中。这是一种合理的方法，但你失去了一些表达能力。例如，CSS中的某些内容只能在块级元素上实现。例如，您可以使用以下命令更改上述内容：

#form, div.control { overflow: hidden; width: 600px } // this is important!
#form div.control { float: left; width: 200px; }
#form div.control div { float: left; width: 100px; }

并在左侧显示标签，如果没有包装内部div，则无法做到这一点。

Answer 2

<强> HTML：

<div class="row">
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
  <div class="column">
    <label>Left</label>
    <input name="left" />
  </div>
</div>

<强> CSS：

.row .column{
  width: 200px;
  float:left;
}
.row .column input,
.row .column label{
  display:block;
}

您现在可以使用CSS来设置文本框和标签的样式，因此它们看起来很漂亮。还要注意这个例子与使用表的相似之处，这表明在某些情况下表不是邪恶的，而是正确的方法。如果要在网格中对齐事物，请使用表格。

Answer 3

事实证明，如果你想在输入字段上创建一个标签表，那么表元素可以使用....如果table元素是最清晰的html代码，为什么不使用它呢？

CSS：带标签和文本框的表格

3 个答案: