Html Chrome bug还是预期行为？

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

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

可识别CD1234
描述一些描述性词语

一切都很好，直到描述需要包装，我希望它不要包装在标签下面。因此，我添加了一些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>

.fixform标签{最小宽度：76px；}
.fixform div{显示：内联块；宽度：210px；填充底部：3px；}
可识别CD1234
描述一些描述性词语

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

---

我的解决方案是在标签内的文本末尾添加一个空格，但这对我来说似乎有点不太妥当。有没有更好的方法来显示word像列一样包装的标签内容，而不必在Chrome中进行奇怪的双击行为

我建议使用

display:table

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

标签
应指的是
输入
。除此之外，如果在标记中每行放置一个元素，它将按预期工作。除非你真的想让它们在显示时“粘在一起”。当我有“查看”模式或“编辑”模式时，我会对两者都使用
label
。明白了。这是有道理的。我不想让它们“粘在一起”，但当我设置宽度、填充和背景色时，空白有时会令人讨厌。这可能会起作用。不过，我对此有点犹豫不决。我还没有完全相信使用display:table和display:table单元格比使用布局要简单；完全不同，试过了。标签div对一直附加到右侧，而不是之前的标签div对的下方。你能重新创建你面临的问题吗？我保存了更改。我认为你的解决方案解决了一个问题，又造成了另一个问题。当我双击一个标签时，它不再从div中抓取一个单词。问题是每个label+div组合应该在自己的行上渲染，但是现在在一行上横向渲染。我通常不会使用“display:table”来修复它。