html - Chrome 错误或预期行为？

Question

我最近不得不对一些 HTML 代码进行故障排除，我想在其中提供经常被复制和粘贴的表单数据。通常，客户只需双击标识符并按 CTRL-C。我这样格式化我的代码:

<label>Identifier</label><div>ABCD1234</div>
<label>Description</label><div>Some descriptive words</div>

一切都很好，直到描述需要换行，而我希望它不要换行在标签下方。因此，我添加了一些 CSS，我将在此处显示为内联。

<style>
.fixform label { min-width: 76px; }
.fixform div { display: inline-block; width: 210px; padding-bottom: 3px; }
</style>
<div class="fixform">
    <label>Identifier</label><div>ABCD1234</div>
    <label>Description</label><div>Some descriptive words</div>
</div>

不幸的是，当我双击标识符“ABCD1234”时，它突出显示了“ABCD1234”和前面的词“标识符”。同样，我可以双击“Description”这个词，它会突出显示“Description”和第一个词“Some”。逻辑似乎是“inline-block”将标签的最后一个词和 div 的第一个词视为一个词。

我的解决方案是在标签内的文本末尾添加一个空格，但对我来说这似乎有点老套。有没有更好的方法来显示像列一样自动换行的标记内容，而不会在 Chrome 中出现奇怪的双击行为？

Answer 1

我建议使用 display:table;

.fixform{
  display: table;
}
.fixform label {
  min-width: 76px;
  display: table-cell;
}
.fixform div {
  display: table-cell;
  width: 210px;
  padding-bottom: 3px;
}