在同一行的不同类中创建不同的 div

Question

我有这样的事情：

<div class="wrapper" style="display:block;">
  <div class="field1">
    <div class="label">Label1</div>
    <div class="item">Item 1</div>
  </div>

  <div class="field2">
    <div class="label">Label2</div>
    <div class="item">Item2</div>
  </div>

  <div class="field3">
    <div class="label">Label3</div>
    <div class="item">Item3</div>
  </div>

  ... more fields ...
</div>

如何通过 CSS 在同一行中将我的显示显示为“Item1 Item2 Item3”？我可以通过“display:none;”隐藏标签。我正在使用 Drupal 7 和 CCK 字段，所以我认为结构有点固定。谢谢。

Answer 1

如果我理解正确，你有一个必须设置为 display:block 的包装器，但在其中你希望每个 div 在同一行。

在这种情况下，这个 CSS 应该为你做：

.field1, .field2, .field3 {
  display: inline-block;
}

这里是JS Fiddle

Answer 2

如果你想把所有东西都放在一条线上，你应该使用spans。

具体来说，如果你愿意

项目1项目2项目3

然后使用

<span class="field1">
    <span class="label">Label1</span>
    <span class="item">Item 1</span>
</span>
<!-- ... -->

另外，你不需要引号：<span class=field1></span> 很好。

希望这会有所帮助！