css - 使用css在一行中显示字符串

Question

我需要在一行中显示字符串“field1 field2 field3”，field1、field2 和 field3 将是 N 个字符。

如何显示字符串？

<style>
#div1{
    width:1000px;
    border:1px solid;
}           
.field1{
    display:inline;
    width:auto;
}
.field2{
    display:inline;
    width:auto;
}
.field3{

    width:auto;
}
        </style>

        <div id="div1">
            <div class="field1">Field1(with N number of characters)</div>
            <div class="field2">Field2(with N number of characters)</div>
            <div class="field3">Field3(with N number of characters)</div>
        </div>

Answer 1

除了将所有 block 级子级(包括最后一个div)转为内联布局外，您可能还需要防止换行。最简单的，你可以用这个替换样式表:

#div1 {
  white-space: nowrap;
  border: 1px solid;
}           
#div1 div {
  display: inline;
}

如果你有其他原因，你可以设置元素的宽度，但上面的代码在没有这样设置的情况下也能工作。