Question

我有一个div，其中包含两个label元素。每个label应该在div的一侧。由于标签是行内元素，因此我尝试使用display: block和display: inline-block来使边距生效，但是结果不是预期的。

  div {
    color: #ffffff;
    background-color: #3f3f3f;
  }
  label:nth-of-type(1) {
    margin-left: 5px;
  }
  label:nth-of-type(2) {
    display: block;
    <!-- display: inline-block; -->
    margin-right: 5px;
    margin-left: auto;
  }

<div>
  <label>Left side label</label>
  <label>right side label</label>
</div>

在执行代码时可以看到，第二个标签不遵守边距，而是显示在第一个标签的下方。

Answer 1

标签必须具有宽度和display：block才能与边距自动配合使用。

今天，使用flexbox更加灵活。

div {
    color: #ffffff;
    background-color: #3f3f3f;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

label:nth-of-type(1) {
    margin-left: 5px;
}

label:nth-of-type(2) {
    margin-right: 5px;
}

<html>
  <body>
    <div>
      <label>Left side label</label>
      <label>right side label</label>
    </div>
  </body>
</html>

Answer 2

使用CSS Grid或Flexbox等更现代的方法，就可以实现这一目标。但是我的解决方案是使用原始CSS来保持与OP的代码相似的水平。

两个标签都需要应用display: inline-block才能将两个元素都视为块元素并保持在同一行上。您还需要设置width，以便在调整文本位置时为它们提供一个容器。对于此示例，我们将执行width: 50%。

注意：：inline-block元素占满width: 100%，将导致标签位于单独的行中，除非您将html修改为删除元素之间的空格。详细了解为何对此行为here和个人CodeSandbox进行修复。

您会注意到，我还从宽度计算中删除了margin-left和margin-right，而是使用padding导致左右间距相同。

HTML：

<body>
    <div>
      <!-- Remove whitespace between labels to not exceed width: 100% -->
      <label>Left side label</label><label>right side label</label>
    </div>
  </body>

CSS：

div {
  color: #ffffff;
  background-color: #3f3f3f;
  padding: 0 5px;
}

label {
  display: inline-block;
  width: 50%;
}

label:nth-of-type(1) {
  text-align: left; /* Not necessary, but you can explicitly set the behavior you want. */
}

label:nth-of-type(2) {
  text-align: right;
}

Codepen

Answer 3

您无需指定display属性，只需使其内联并使用float属性即可浮动它们。

<style>
div {
  color: #ffffff;
  background-color: #3f3f3f;
  display: block;
  height: 20px;
  width: 100%;
  
}

label:nth-of-type(1) {
  margin-left: 5px;
  float: left;
}

label:nth-of-type(2) {
  float: right;
  margin-right: 5px;
}
</style>

<html>

<body>
  <div>
    <label>Left side label</label>
    <label>right side label</label>
  </div>
</body>

</html>

尽管使用显示块，但保证金自动设置仍未得到遵守

3 个答案: