Html 使用 CSS 如何最好地显示名称值对？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/61357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS how best to display name value pairs?
提问by Iain Holder
Should I still be using tables anyway?
我仍然应该使用表格吗？
The table code I'd be replacing is:
我要替换的表代码是：
<table>
<tr>
<td>Name</td><td>Value</td>
</tr>
...
</table>
From what I've been reading I should have something like
从我一直在阅读的内容来看，我应该有类似的东西
<label class="name">Name</label><label class="value">Value</value><br />
...
Ideas and links to online samples greatly appreciated. I'm a developer way out of my design depth.
非常感谢在线示例的想法和链接。我是一名超出设计深度的开发人员。
EDIT: My need is to be able to both to display the data to a user and edit the values in a separate (but near identical) form.
编辑：我的需要是能够向用户显示数据并以单独（但几乎相同）的形式编辑值。
回答by macbirdie
I think that definition lists are pretty close semantically to name/value pairs.
我认为定义列表在语义上与名称/值对非常接近。
<dl>
<dt>Name</dt>
<dd>Value</dd>
</dl>
回答by Dónal
Horizontal definition lists work pretty well, i.e.
水平定义列表工作得很好，即
<dl class="dl-horizontal">
<dt>ID</dt>
<dd>25</dd>
<dt>Username</dt>
<dd>Bob</dd>
</dl>
The dl-horizontalclass is provided by the Bootstrap CSS framework.
该dl-horizontal班由引导CSS框架提供。
From Bootstrap4:
从 Bootstrap4：
<dl class="row">
<dt class="col">ID</dt>
<dd class="col">25</dd>
</dl>
<dl class="row">
<dt class="col">Username</dt>
<dd class="col">Bob</dd>
</dl>
回答by Espo
I think tables are best used for tabular data, which it seems you have there.
我认为表格最适合用于表格数据，您似乎拥有这些数据。
If you do not want to use tables, the best thing would be to use definition lists(<dl> and <dt>). Here is how to style them to look like your old <td>layout.
http://maxdesign.com.au/articles/definition/
如果你不想使用表格，最好的办法是使用定义列表（<dl> and <dt>）。以下是如何将它们设置为看起来像您的旧<td>布局。
http://maxdesign.com.au/articles/definition/
回答by erlando
It's perfectly reasonable to use tables for what seems to be tabular data.
将表格用于似乎是表格数据的内容是完全合理的。
回答by Allain Lalonde
If I'm writing a form I usually use this:
如果我正在写一个表格，我通常使用这个：
<form ... class="editing">
<div class="field">
<label>Label</label>
<span class="edit"><input type="text" value="Value" ... /></span>
<span class="view">Value</span>
</div>
...
</form>
Then in my css:
然后在我的 css 中：
.editing .view, .viewing .edit { display: none }
.editing .edit, .editing .view { display: inline }
Then with a little JavaScript I can swap the class of the form from editing to viewing.
然后使用一点 JavaScript，我可以将表单的类从编辑切换到查看。
I mention this approach since you wanted to display and edit the data with nearly the same layout and this is a way of doing it.
我提到这种方法是因为您希望以几乎相同的布局显示和编辑数据，这是一种实现方式。
回答by Derek Lawless
Like macbirdie I'd be inclined to mark data like this up as a definition list unless the content of the existing table could be judged to actually betabular content.
像 macbirdie 一样，我倾向于将这样的数据标记为定义列表，除非现有表格的内容可以被判断为实际上是表格内容。
I'd avoid using the label tag in the way you propose. Take a look at explanation of the label tag @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label- it's really intended to allow you to focus on its associated control. Also avoid using generic divs and spans as from a semantic point of view they're weak.
我会避免以您建议的方式使用标签标签。看看标签标签的解释@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label- 它确实是为了让您专注于其相关控件。还要避免使用通用的 div 和 span，因为从语义的角度来看它们很弱。
If you're display multiple name-value pairs on one screen, but editing only one on an edit screen, I'd use a table on the former screen, and a definition list on the latter.
如果您在一个屏幕上显示多个名称-值对，但在编辑屏幕上只编辑一个，我会在前一个屏幕上使用一个表格，在后一个屏幕上使用一个定义列表。
回答by Fire Lancer
use the float: property eg: css:
使用 float: 属性，例如：css:
.left {
float:left;
padding-right:20px
}
html:
html：
<div class="left">
Name<br/>
AnotherName
</div>
<div>
Value<br />
AnotherValue
</div>
