Question

我正在制作一个简单的计算器页面，但我很难按照我想要的方式对齐按钮。我的所有按钮都在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。

Answer 1

在按钮上尝试 width：33％。它告诉浏览器使用（大致）1/3，如果每个按钮的可用空间。

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

Answer 3

试试这个：

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

麻烦在div中对齐按钮

3 个答案: