html - 使第二个跨度环绕在自身下方而不是第一个

Question

你好我有这个代码

<div class="test">
    <span class="first-span">first span</span>
    <span class="second-span">some long long long long text</span>
</div>

用CSS

.test{
    width:150px;
    margin:10px
}
.first-span{
    border:1px solid red;
}
.second-span{
    border:1px solid blue
}

现在，正如你们都可以在小提琴中看到的那样，第二个跨度中的“长”字正在包装并在“第一”字下。但我需要的是“long”应该放在“some”这个词下

这有可能吗？

score 4 · Accepted Answer

这是跨度工作的方式，或者所有“内联”元素。为了解决这个问题，我们可以display: block; float: left;使用 float:left 使跨度只占用它需要的空间。

score 2 · Accepted Answer

将显示器用作表格怎么样？

.test {
  display: table;
}

.test span {
  display: table-cell;
  width: 100px;
  border: 1px solid #333;
}

.test .first-span {
  width: 100px;
}

<div class="test">
  <span class="first-span">first span</span>
  <span class="second-span">some long long long long text</span>
</div>

score 1 · Accepted Answer

有更好的方法，但只需将第一个跨度浮动到左边就可以了

.first-span{
    border:1px solid red;
    float:left;
    display:block;
}

3 回答 3