表格中是否包含 HTML 表单

发布于 2024-10-17 18:14:55 字数 364 浏览 4 评论 0原文

在任何人关闭这个问题或抱怨之前...我一直在整个 StackOverFlow 网站上查找，但找不到任何有关表格和表单的直接信息。

我有一个表单，其中至少有 20 到 35 个不同类别的标签和文本框。因此，开始为每个元素使用 CSS 就太过分了。

出于某种原因，我想使用表格将所有字段与其各自的标签对齐，因为某些标签会比其他标签大（即“名字”比“年龄”更大） ，因此布局会扭曲。我无法开始为每个标签和文本框应用 css（每个标签和文本框大约 20 个......这是 40 个单独的 css 规则）。

除非有人能给我一些技巧，否则我会很感激。

我知道 CSS 对于表单很有用，但是对于非常大的表单呢？

需要登录才能够评论，你可以免费注册一个本站的账号。

零度℉ 2024-10-24 18:14:55

只要您充分利用级联，表单的 CSS 就没有任何问题。

事实上，我推荐它而不是使用 table。

只需设置一些基本规则...

input {
   padding: 3px;
   float: right;
}

然后处理规则的例外情况...

input#age {
   float: none;
}

So long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.

In fact, I recommend it over using table.

Just set up some base rules...

input {
   padding: 3px;
   float: right;
}

Then handle the exceptions to your rules...

input#age {
   float: none;
}

表单不是表格数据，简单的表单只是表面上看起来像它们。

CSS 适合长格式。具有适用于大多数数据的样式。然后是针对短数据位和/或长数据位的更具体的样式，等等。不要单独设计所有东西。

尝试使用 UL 和 LI 而不是表格，如以下文章中所述点击查看文章

它也提供了CSS。

您不需要 40 个单独的 CSS 规则。您可以为所有标签制定一项规则，为所有文本框制定一项规则。

但是 - 话虽如此 - 这种布局，你有两列内容，并且你希望第 1 列中的所有内容（本例中的标签）彼此对齐，并且第 2 列中的所有内容（文本）框）彼此对齐，同时保持行对齐 - 这正是好桌子所擅长的事情。

我是 CSS 的大力倡导者，并且我相信滥用表格（例如布局页面）是邪恶的、邪恶的、邪恶的 - 但我肯定会选择使用表格。

和我恋爱吧 2024-10-24 18:14:55

归根结底，这都是关于偏好和功能的。我个人偏好是 div/CSS。 CSS 的级联性质，以及代码的简洁性等等。

但是，嘿，如果你喜欢表格 - 从屋顶上大声喊出来！

少跟Wǒ拽 2024-10-24 18:14:55

您可以使用 jQuery Masonry。

据我所知，它会实现你需要的布局，你所要做的就是添加类和一行 JS 代码。

抠脚大汉 2024-10-24 18:14:55

您可以使用 CSS 创建良好的、可访问的表单，而无需太多 CSS 规则（无论如何，对于对齐部分）。您基本上只需要设置所有标签的宽度（使用一条规则）并定义它们如何与输入元素交互。 http://www.websiteoptimization.com/speed/tweak/forms/< 有一篇不错的文章/a> （只是我发现的第一个，我确信还有很多其他的）。