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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将大尺寸按钮放在小尺寸按钮旁边？相关的知识，希望对你有一定的参考价值。

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

但是我在样式上有问题。

我希望我的“清除”按钮变大并像这样放置：

+---+---+---+---+-+
|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>
答案

尝试一下：

.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>
另一答案

使用弹性框：

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

以上是关于如何将大尺寸按钮放在小尺寸按钮旁边？的主要内容，如果未能解决你的问题，请参考以下文章

较小尺寸的按钮不是带有 layer.cornerRadius 的圆形

如何根据屏幕尺寸从离子菜单中动态更改一侧？

如何让 GridBagLayout 尊重按钮或面板的最小尺寸？

如何使布局适合屏幕尺寸

带有按钮的尺寸等级和约束

将按钮中间放在手机屏幕底部（无论屏幕大小）