Question

我有一个宽度为960像素的容器和按钮的页面。我想制作这样的按钮：

960px宽度
/ -------------- \
[BTN]余量[BTN]

和

960px宽度
/ --------------- \
[BTN] M [BTN] M [BTN]

我想进行边距自动设置。

Answer 1

Flexbox可以做到这一点

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  max-width: 960px;
  margin-bottom: 10px;
  border: 1px solid grey;
}

＆＃13;

<div class="container">
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
</div>
<div class="container">
  <button>button1</button>
  <button>button2</button>
</div>
<div class="container">
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  <button>button4</button>
</div>

＆＃13;

Answer 2

使用flexbox布局

div{
  width:100%;
  display:flex;
  flex-direction: row; 
  justify-content: space-between;
  }

<div>
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  </div>

第二段摘录

div{
  width:100%;
  display:flex;
  flex-direction: row; 
  justify-content: space-between;
  }

<div>
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  <button>button4</button>
  </div>

如需完整指南，请访问：A complete guide to flexbox

保证金取决于元素的数量

2 个答案: