尽管使用显示块，但保证金自动不被尊重

Question

我有一个包含两个 label 元素的 div。每个 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

您不需要指定显示属性，只需让它内联并使用浮动属性来浮动它们。

<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>

Answer 3

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

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

注意： inline-block 元素占据一个完整的 width: 100% 将导致标签在不同的行上除非您修改 html 以删除元素之间的空格。详细了解此行为的原因 here and a personal 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

尽管使用显示块，但保证金自动不被尊重

Margin auto not being respected despite using display block

html

css

label

margin

display