如何将大尺寸按钮放在小尺寸按钮旁边？

时间：2019-12-12 10:19:31

标签： html css

我正在尝试制作基本计算器。

但是我在样式方面遇到问题。

我希望我的“清除”按钮较大，并按以下方式放置：

+---+---+---+---+-+
|BTN|BTN|BTN|BTN|C|
+---+---+---+---|L|
|BTN|BTN|BTN|BTN|E|
+---+---+---+---|A|
|BTN|BTN|BTN|BTN|R|
+---+---+---+---|B|
|BTN|BTN|BTN|BTN|T|
+---+---+---+---|N|
|BTN|BTN|BTN|BTN|!|
+---------------+-+

看起来很轻松，但是已经尝试了一个小时。

如何设置样式？

这是我的html：

 <div class="buttons">
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
      <div class="btnLine">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
        <input class="button" type="button" value="BIN">
      </div>
    </div>

2 个答案:

答案 0 :(得分：0)

使用Flex框：

.calculator {
    display: flex;
    align-items: stretch;
}
.buttons {
    display: flex;

}
.btnLine input.button {
    display: flex;
}
.clear {  
   border: 1px solid grey; /*rewriting standard style, it is necessary to be able to change the size*/
}
<html>
<body>
    <div class="calculator">
        <div class="buttons">
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
            <div class="btnLine">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
                <input class="button" type="button" value="BIN">
            </div>
        </div>
        <input class="clear" type="button" value="Clear">
    </div>
</body>
</html>

答案 1 :(得分：-1)

尝试一下：

.buttons {
    display: inline-block;
    float: left;
}
.btnLine input.button {
    height: 30px;
    margin: 0 5px 10px 0;
}
.big-btn {
    display: inline-block;
    margin-left:10px;
}
.big-btn input.button {
    height: 230px;
}
<html>
<body>
   <div class="buttons">
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
  <div class="btnLine">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
    <input class="button" type="button" value="BIN">
  </div>
</div>
<div class="big-btn">
<input class="button" type="button" value="Clear">
</div>
    
</body>
</html>

我为每个按钮添加了高度和边距。

相关问题
最新问题