CSS：表标签和文本框

我试图打破表拐杖...CSS：表标签和文本框

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

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

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

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

我希望我解释得很好。

谢谢。

其他编辑：据我所知，也许我不应该避免使用表格来处理表格擅长的事情，但是如果CSS有一个属性analagos到margin-left：10px，但是在垂直方向执行回车之后，在表格上使用CSS的好处是我的标记中不会有一百万个TR和TD标记。

有这样的事吗？

来源

2010-02-11 ChadD

如果它是表格数据 - 在我看来，这就是你所拥有的 - 为什么不使用表格？这就是它的目的！应避免表格布局，例如一个用于菜单的表格列和另一个用于内容的表格列;但是，当他们合适时，不要过度使用表格！ – GreenMatt 2010-02-11 06:08:31

谢谢，有道理。但是，如果CSS有一个属性analagos到margin-left：10px，但在执行cariage return之后垂直方向，使用CSS over表的优点是我的标记中没有一百万TR和TD标记。有这样的事吗？！这是我真正的问题。 – ChadD 2010-02-11 14:41:30

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样式的文本框和标签，所以他们好看。还要注意这个例子与使用表格有多相似，这表明在某些情况下表格不是邪恶的，而是正确的方式。如果你想对齐网格中的东西，请使用表格。

来源

2010-02-11 06:06:39 Marius

你要做的就是创建表单字段是这样的：

<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做的相当，以及让你的标签。

来源

2010-02-11 06:07:52 cletus

原来，如果你想在输入字段上生成一个标签表，那么表元素就可以使用....如果表元素是最清晰的html代码，为什么不使用它呢？

来源

2010-02-11 06:08:48

CSS：表标签和文本框

回答

相关问题