div中的按钮对齐问题答案

【问题标题】：Trouble Aligning Buttons Within a divdiv中的按钮对齐问题
【发布时间】：2018-04-17 20:00:52
【问题描述】：

我正在制作一个简单的计算器页面，但在按我想要的方式对齐按钮时遇到了很多麻烦。我的所有按钮都在一个 div 中，这已经是我希望每行按钮的宽度。我的问题是，无论我如何尝试边距或按钮在右侧有额外的空间并且它们不与视口的右侧对齐或者它们太大并且它们溢出到下一行.我确信有一个简单的解决方案，但我太初学者了，看不到它。 :(

目前我的按钮容器和按钮的 CSS 如下：

#buttons {
  width:525px;
  margin-left: 25px;
  margin-top: 10px;
}

button {
  width: 110px;
  height: 110px;
  border: 2px solid black;
  border-radius: 20px;
  margin: 10px 0px 0px 0px;
}

Codepen here.

【问题讨论】：

这可能有帮助吗？ codereview.stackexchange.com/q/83029/74659

标签： css button alignment

【解决方案1】：

试试这个：

.wrapper {
    border: 1px solid #000;
    text-align: center;
    display: inline-block;
    background-color: #607466;
}

.result {
    margin:10px 20px;
}

input {
    height: 20px;
    border: 1px solid;
    outline: none;
    width: 100%;
    background: yellow;
}

span {
    background: #AAA;
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: 0 20px 10px 10px;
    line-height: 60px;
    float: left;
    cursor: pointer;
    background: #FFF;
    border: 1px solid;
}

span:hover {
    background-color: #AAA;
}

.result ~ p {
    padding-left: 10px;
    clear: both;
}

<div class="wrapper">
    <p class="result"><input type="text" name="result"></p>
    <p><span>AC</span><span>CE</span><span>/</span><span>*</span></p>
    <p><span>7</span><span>8</span><span>9</span><span>-</span></p>
    <p><span>4</span><span>5</span><span>6</span><span>+</span></p>
    <p><span>1</span><span>2</span><span>3</span><span>=</span></p>
    <p><span>0</span><span>.</span><span>Invisible</span></p>
    <br style="clear: both">
</div>

【讨论】：

【解决方案2】：

Flex box is worth learning。

在 CSS 中使用/**/ 注明更改。

完整示例，https://codepen.io/anon/pen/LOZEPp

CSS

body {
  background-color: #141414;
  font-family: 'Rubik', sans-serif;
  display: flex; /**/
  justify-content: center; /**/
  padding: 0; /**/
  margin: 0; /**/
}


#calc-main {
  background-color: #607466;
  width: 550px; /**/
  height: 700px; /**/
  border: 3px solid black;
  border-radius: 20px;
  display: flex; /**/
  flex-direction: column; /**/
  justify-content: space-around; /**/
}

#calc-brand {
  flex: 1; /**/
  background: yellow;
  text-align: center;
  padding: 0; /**/
  margin: 10px; /**/
}

#calc-viewport {
  flex: 1; /**/
  margin: 10px; /**/
  font-size: 2em;
  background-color: #D4D2A5;
  padding: 0.25em; /**/
  text-align: right;
  border: 2px solid black;
  border-radius: 20px;
}

#buttons {
  margin: 10px; /**/
  flex: 16; /**/
  background: orange; /**/
  display: flex; /**/
  flex-direction: column; /**/
  align-items: center; /**/
  padding: 5px; /**/
}

.button-row { /**/
  flex: 1; /* important */
  background: yellow;
  width: 100%; /**/
  margin: 5px; /**/
  display: flex; /**/
  flex-direction: row; /**/
  justify-content: space-between; /**/
}

button {
  flex: 1; /* important */
  max-width: 110px; /**/
  max-height: 110px; /**/
  border: 2px solid black;
  border-radius: 20px;
  margin: 10px; /**/
}

HTML

<body>
  <div id='calc-main'>
    <h1 id='calc-brand'>JAVASCRIPT CALCULATOR</h1>
    <div id='calc-viewport'>
      <p id='main-output'>0</p>
      <p id='secondary-output'>0</p>
    </div>
      <div id=buttons>
        <div class="button-row">
          <button type='button' class='button-danger'>AC</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button'>÷</button>
        </div>
        <div class="button-row">
          <button type='button' class='button-danger'>AC</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button'>÷</button>
        </div>
        <div class="button-row">
          <button type='button' class='button-danger'>AC</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button'>÷</button>
        </div>
        <div class="button-row">
          <button type='button' class='button-danger'>AC</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button' class='button-danger'>CE</button>
          <button type='button'>÷</button>
        </div>
      </div>
  </div>
</body>

【讨论】：

【解决方案3】：

在按钮上尝试 width: 33%。如果每个按钮都有可用空间，它会告诉浏览器使用（大约）1/3。

【讨论】：