Question

假设我有三个按钮

<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会导致按钮彼此不对齐。

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

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

Answer 3

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

编辑：我简单地使用了以前的代码 - 更少有效...

＆＃13;

.wrap {
  display: flex;
  justify-content: space-between;
}

button:nth-child(2) {
  margin-left: auto;  
}

＆＃13;

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

＆＃13;

Answer 4

使用float，你必须将链接包装成div，如下所示：

＆＃13;

.left {
  float: left;
}

.right {
  float: right;
}

＆＃13;

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

＆＃13;

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

4 个答案: