html - Chrome错误或预期行为？

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

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

一切都很好，直到描述需要包装，我希望它不包装在标签下方。因此，我添加了一些CSS，这些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”和前面的单词“ Identifier”。同样，我可以双击单词“ Description”，然后突出显示“ Description”和第一个单词“ Some”。逻辑似乎是“内联块”将标签的最后一个单词和div的第一个单词视为一个单词。

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

最佳答案

我建议使用display:table;

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