CSS - 3 个链接 - 左对齐 1，右对齐 2答案

【问题标题】：CSS - 3 Links - Left Align 1, Right Align 2CSS - 3 个链接 - 左对齐 1，右对齐 2
【发布时间】：2016-07-21 14:25:23
【问题描述】：

假设我有三个按钮

<div class='button-wrap>
 <a class='button'>First Button</a>
 <a class='button'>Second Button</a>
 <a class='button'>Third Button</a>
</div>

第一个左对齐，第二个右对齐的最佳方法是什么？最好不要使用浮点数。

我尝试将后两个包装在单独的 div 中并使用 text-align:right 但额外的 div 会导致按钮彼此不对齐。

【问题讨论】：

"最好不使用浮点数。"为什么，使用浮动有什么问题？还是弹性盒子？

标签： html css

【解决方案1】：

试试这个。

.buttons {
  display: flex;
  justify-content: space-around;
}

.buttons .button:first-child {
  flex-grow: 1;  
}

<div class="buttons">
  <div class="button">
    <button>First button</button>
  </div>
  <div class="button">
    <button>Second button</button>
  </div>
  <div class="button">
    <button>Third button</button>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 display:flex 实现它 - 无需更改您的标记

.button-wrap {
  display: flex;
}
.button:nth-child(2) { 
  /* margin left the second button */
  margin-left: auto;
}

<div class="button-wrap">
  <a class="button">First Button</a>
  <a class="button">Second Button</a>
  <a class="button">Third Button</a>
</div>

【讨论】：

【解决方案3】：

使用浮动，您必须像这样将链接包装到 div 中：

.left {
  float: left;
}

.right {
  float: right;
}

<div class='button-wrap'>
  <div class="left">
    <a class='button'>First Button</a>
  </div>
 <div class="right">
   <a class='button'>Second Button</a>
   <a class='button'>Third Button</a>
 </div>
</div>

【讨论】：

【解决方案4】：

在包装器上使用带有justify-content: space-between 的flexbox，并将margin-left: auto 放在第二个按钮上。这将使从那里的所有内容向右对齐，而之前的所有内容都向左对齐。

编辑：我简化了前面的代码 - 越少越高效...

.wrap {
  display: flex;
  justify-content: space-between;
}

button:nth-child(2) {
  margin-left: auto;  
}

<div class="wrap">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

【讨论】：

大声笑哇，支持良好的命名约定（检查我的答案）xD