使用CSS的表格布局

我知道已经有一堆关于使用CSS和表格的表格布局的问题。总体而言，我认为CSS是一条可行的路线，但是我所看到的所有CSS解决方案都存在着对标签和/或输入字段的宽度进行“硬编码”的缺点。使用CSS的表格布局

结果是需要为每个表单添加一个或两个自定义规则，假设标签的最大宽度在每种情况下都不相同。

有没有一种方法可以对表单进行样式设置，以便自动将标签和输入对齐，而不管标签有多长？

来源

2010-02-01 Dónal

+1：总是这一个错误我也。到目前为止，我不得不每次硬编码大小。 – 2010-02-01 04:43:42

如果你制作一个真正的表格布局，使用'

'没什么问题。 – kennytm2010-02-01 13:23:18

@KennyTM - 表格布局与否。表格应该用于表格数据，而不是布局。问题的作者甚至承认这一点。 – Finglas 2010-02-01 13:30:30

回答

-1

为页面标题中嵌入的特定页面制定规则没有任何问题，而不是针对所有内容具有不同的文件。

如果您的形式是如此不同，你说他们，那么就没有其他办法做到这一点，而不是为每个自定义规则...

无论你是否希望把在所有表单样式巨大的文件，或只是在页眉中包含相关的内容，取决于您的用户在平均访问时将访问多少个表单。每次访问一些表单;把它们放在标题中。平均每次访问都有很多表单;把它们放在一个单独的文件中，以便用户可以缓存它们。

来源

2010-02-01 04:31:39

有这个网址看看在窗体上的左手边 http://www.blueprintcss.org/tests/parts/forms.html

如果你把标签上的1号线和另一条线路上的输入框，那么你不必担心标签的排列。款式多一点，你将有一个干净漂亮的web2.0状

enter image description here

干杯

来源

2010-02-01 05:15:28 Phradion

+1。如果你在一个字段中有一个很长的标签，而在另一个字段中有一个很短的标签，那么即使你使用表格，将它变成2列也是很难看的。使它成为2行，在第1行中标记，在第2行中创建表单字段。您不必再担心标签长度。 – 2010-02-01 05:42:04

这些布局都不具可比性。 – Greg 2010-02-22 21:26:47

好放置标签上或附近的输入是一个单独的讨论议题（我建议在主题阅读卢克莱夫斯基的书：http://www.lukew.com/resources/articles/web_forms.html）

造型Web表单的用处不大。首先，您要确保您以语义恰当的方式标记您的表单。这是您现在使用CSS代替表格的主要优点之一。关于这方面的更多信息，请参阅关于此主题的优秀List Apart文章：http://www.alistapart.com/articles/prettyaccessibleforms/

现在，在上述文章中，作者使用名为inline-block的显示属性。这是实现这种影响的一种相当简单的方式。只需申请：

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

而您的标签将有一个固定的长度与输入相邻。但是，如果你不指定宽度，只需使用：

label, input { 
    display: inline-block; 
}

那么你的标签和输入都将排队在线“自动地”为你把它。这里的问题不是一个技术问题，而是一个设计问题。如果你输入不排队垂直那么它会变得更加困难了用户完成表单。这是另一个要考虑的，你应该记住，因为它更容易在标签和输入位置以这种方式比它要适应固定的宽度。

的另一个问题是inline-block的并不在某些浏览器很好地工作。 inline-block的是不是在旧版本的Firefox或IE浏览器的可靠。所以我倾向于使用另一种方法。假设您使用列表以语义合适的方式标记您的表单。那么在这种情况下，你可以有这样的：

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

在这种情况下，我们可以使用一个固定的宽度和绝对定位相邻排队我们的元素：

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

标签相对于定位到列表项目，并且输入被推到具有左边距的一侧。这个方法虽然有一个问题。此方法只能使用硬编码宽度。更重要的是，多行标签不能正确清除。所以在这种情况下，我们可以采取类似的方法，但使用浮动和溢出。

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

用这种方法的标签浮动到输入左边现在：因此，我们可以在相同的HTML标记我前面表明使用这种替代CSS。如果不指定宽度，则标签的宽度将与其中的内容一样宽（直到HTML文档中父节点的宽度）。通过将溢出设置为隐藏在父对象上，不需要清除该元素。此技术将使用硬编码宽度或宽度为auto的继承默认值。

最后但并非最不重要的，如果你想使用最有效的表单方法（输入顶部的标签），这已被证明是用户可以完成最快的形式的样式，你需要的唯一的CSS做到这一点是：

label, input { 
    display: block; 
}

另外一个音符 - 你的HTML标记了这样你可能会想知道所有这些列表元素创建的要点等等。你应该选择包括您的文档中的CSS重置为确保浏览器之间的一致性。我推荐Eric Meyer的：

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

来源

2010-02-01 06:10:21

这个问题特别要求解决方案的标签是任意长度的。这并没有以任何方式解决这个问题。 – 2010-02-01 09:03:14

啊，我明白了。我会做一些修改来纠正这一点。 – 2010-02-01 13:12:13

发布的方法虽然只是一个做问题，如果你忽略宽度的规则。我现在已经在解决方案中解释了这一点，同时也提供了所有三种流行的方法来实现CSS和HTML的这种布局风格。此外，设计师在设计表格时应该考虑的答案就是考虑因素。此外，它引用适当的方法来标记符合语义的HTML网页表单，因为提到的问题是他们从基于表格的布局过渡。 – 2010-02-01 13:23:48

个人意见：使用一个表。

每次你喜欢写东西

label { 
    width: 150px; /* or whatever width */ 
}

那么你混合内容和形式，因为如果你知道它会包含标签的值只能计算，这违背原则语义CSS纯粹主义者。

来源

2010-02-01 13:28:51

这完全不正确。当您使用表格时，您将内容与演示文稿混合在一起。我们拥有CSS的全部原因是将其分开。因此，通过在CSS文件中指定宽度来控制布局。如果你使用表格。布局由现在嵌入在内容中的表格元素控制。 – 2010-02-02 01:08:49

我没有说这不是。我说*甚至*带有一个风格化的标签标签，您将内容与演示文稿混合在一起。 CSS定义不应该依赖于字段包含的内容，而是在这种情况下。所以你不妨使用一张可在所有浏览器中可靠工作的表格，OP所需的内容以及几行代码。如果CSS为所有浏览器中的* all *需求提供了替代方案，而无需愚蠢的黑客攻击，表格就可以放弃。 – 2010-02-02 08:03:37

您可以通过浮动标签并将它们放置在浮动块元素中来处理，并且类似于输入字段。这将创建一个双列布局，根据内容自动调整大小。这里的HTML：

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

，这里是CSS规则：

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

编辑：如果你想创建标签和输入之间的语义连接，您可以正式标记每个标签作为HTML标签然后使用为和id属性来链接它们。例如，这里有一个标签定义：

<div><label for='name'>Name: </div>

，这里是相应的输入字段：

<div><input id='name' type="text"></div>

来源

2010-02-01 19:42:41 jdigital

+1：有点冗长，但像魅力一样工作！ – 2010-02-03 10:16:24

对不起，但这并没有保持标签和它们的值之间的任何连接。他们是完全独立的div，他们唯一的联系是可视的，如果你碰巧把他们并排放置。没有“语义”联系，您的内容的含义严格依赖于其内容。对齐它们是微不足道的，重点是以有意义的方式对齐它们。 – 2010-02-08 09:49:03

这很容易解决，我已经编辑了相应的答案。 – jdigital 2010-02-08 18:05:43

使用CSS的表格布局

回答

相关问题