Question

我正在制作一个计算器，我有一些基本按钮。我写了其他按钮，我试图将它们放在左侧。

我试图将#extras浮动到左边，但什么都没发生。

HTML：

inst_id = 1

CSS：

<title>Calculator</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="script.js"></script>
  <body>
    <div id="calculator">
      <div id="total">
      </div>
      <div id="operators">
        <a>+</a>
        <a>-</a>
        <a>&divide;</a>
        <a>&times;</a>
      </div>
      <div id="side">
        <a id="sq">^</a>
        <a id="sqrt">√</a>
        <a id="decimal">.</a>
        <a id="equals">=</a>
      </div>
      <div id="numbers">
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
        <a>6</a>
        <a>7</a>
        <a>8</a>
        <a>9</a>
        <a id="clear">C</a>
        <a>0</a>
        <a id="clearall">AC</a>
      </div>
      <div id="extras">
        <a id="factorial">x!</a>
        <a id="oneover">1/x</a>
        <a id="sine">sin</a>
        <a id="cosine">cos</a>
        <a id="tangent">tan</a>
      </div>
      </div>
        </body>

Answer 1

HTML

<div class='test'>
  <div style='float: left;'>
    <button>test</button>
  </div>
  <div style='float: left;'>
    <button>test</button>
  </div>
    <div style='float: left;'>
    <button>test</button>
  </div>
</div>

CSS

.test {
  width:200px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
  border:1px red solid;
}

Answer 2

<div id="calculator">
      <div id="total">
      </div>
      <div id="operators">
        <a>+</a>
        <a>-</a>
        <a>&divide;</a>
        <a>&times;</a>
      </div>
      <div id="side">
        <a id="sq">^</a>
        <a id="sqrt">√</a>
        <a id="decimal">.</a>
        <a id="equals">=</a>
      </div>
      <div id="numbers">
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
        <a>6</a>
        <a>7</a>
        <a>8</a>
        <a>9</a>
        <a id="clear">C</a>
        <a>0</a>
        <a id="clearall">AC</a>
      </div>
      <div id="extras">
        <a id="factorial">x!</a>
        <a id="oneover">1/x</a>
        <a id="sine">sin</a>
        <a id="cosine">cos</a>
        <a id="tangent">tan</a>
      </div>
<div class="clear"></div>
      </div>

CSS - ＆GT;

.clear {
clear :both;
}

从.calculator css中移除高度，你很高兴。

Answer 3

将side numbers和extras放在一个div下。将width:100%提供给其父级和10-to extras, 80-to numbers and 10-to side

<div class='main'>
  <div id='extras'>
    <button>extras</button>
  </div>
  <div id='numbers'>
    <button>numbers</button>
  </div>
    <div id='side'>
    <button>side</button>
  </div>
</div>

.main{
  width:100%;
}
#extras{
  width:10%;
}
#numbers{
  width:80%;
}
#side{
  width:10%;
}

如何在左侧浮动更多按钮

3 个答案: