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

如果您想要一行中的所有内容，则应使用span s。

具体来说，如果你想要

Item1 Item2 Item3

然后使用

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

此外，您不需要引用：<span class=field1></span>没问题。

希望这有帮助！

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

2 个答案: