div

Question

我有div个固定尺寸的不同长度的按钮：

＆＃13;

＆＃13;

div {
  background: blue;
  width: 400px;
  height: 200px;
}

＆＃13;

<div>
  <button>Click Me</button>
  <button>No, Click Me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>Alright, you can click them</button>
  <button>What about me?</button>
  <button>I don't care</button>
  <button>Click Whoever</button>
  <button>OMG I'm a button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
</div>

＆＃13;

＆＃13;

＆＃13;

默认情况下，按钮全部排在左侧，当然如果您float:right，它们将在右侧对齐。

我想知道如何将每行中最左边的按钮对齐到左边，最右边的按钮在右边对齐，同时在该行的按钮之间均匀地分割多余的空间。

有没有简单的方法来实现这样的目标？

这是一个codepen：Click me

Answer 1

使用flex box model，我们可以实现您的目标：

div {
  background: blue;
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div>
  <button>Click Me</button>
  <button>No, Click Me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>Alright, you can click them</button>
  <button>What about me?</button>
  <button>I don't care</button>
  <button>Click Whoever</button>
  <button>OMG I'm a button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
</div>

请记住，some compatibility issues没有必要的prefixes。

Answer 2

是的，就像这样：http://codepen.io/dirtysmith/pen/pgVxGQ

只需将此添加到您的css：

div > button:nth-child(even){float: right; clear: both;}
div > button:nth-child(odd){float: left;}

Answer 3

如果您决定手动将它们分成透视行，则可以使用flexbox。使用justify-content属性并将其设置为space-between

div#parent {
  background: blue;
  width: 400px;
  height: 200px;
}
div#parent div.row {
  display: flex;
  justify-content: space-between;
}

<div id='parent'>
  <div class='row'>
    <button>Click Me</button>
    <button>No, Click Me</button>
    <button>No, me</button>
    <button>No, me</button>
    <button>No, me</button>
  </div>
  <div class='row'>
    <button>No, me</button>
    <button>No, me</button>
    <button>Alright, you can click them</button>
  </div>
  <div class='row'>
    <button>What about me?</button>
    <button>I don't care</button>
    <button>Click Whoever</button>
  </div>
  <div class='row'>
    <button>OMG I'm a button</button>
    <button>Filler Button</button>
    <button>Filler Button</button>
    <button>Filler Button</button>
  </div>
  <div class='row'>
    <button>Filler Button</button>
    <button>Filler Button</button>
  </div>
</div>

CodePen

将它们分组成行是一项更多的工作，但这是我唯一能想到的。

参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/