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”和前面的单词“Identifier”。同样，我可以双击单词“Description”，它会突出显示“Description”和第一个单词“Some”。逻辑似乎是“内联块”将标签的最后一个单词和div的第一个单词视为单个单词。

我的解决方案是在标签内部的文本末尾添加一个空格，但这对我来说似乎有点迟钝。有没有更好的方法来显示像Chrome一样的文字包装而没有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;
}

Chrome错误或预期的行为？

1 个答案: