html - 使菜单项在放大时不会溢出

Question

我用 float 按钮制作了一个菜单，但是当在平板电脑/手机上放大或浏览时，最后的 1-2 项会溢出并排在第二行。发生这种情况是因为 float 就是这样工作的。

无论屏幕多小，我怎样才能让所有菜单项都显示在一行中？

例如，放大它并看到 #4 在我的菜单下。

#top{
   background-color:red;
    width:100%;
    height:100px;
}
#but1,#but2,#but3,#but4{
  float:left;
    width:20%;
    background-color:blue;
    color:white;
  text-align:center;
    margin:10px;
    height:50px;
}

<div id="top">
    <div id="but1">1</div>
    <div id="but2">2</div>
    <div id="but3">3</div>
    <div id="but4">4</div>
    
</div>

Answer 1

问题是边距，它不包含在 width 中。

这里有一些方法:

• 在边距中使用百分比，而不是固定长度:

  #but1, #but2, #but3, #but4 {
    margin: 2.5%;
  }
  

  现在，4 * (2.5% + 20% + 2.5%) = 4 * 25% = 100%。

      #top {
        background-color: red;
        width: 100%;
        height: 100px;
      }
      #but1, #but2, #but3, #but4 {
        float: left;
        width: 20%;
        background-color: blue;
        color: white;
        text-align: center;
        margin: 2.5%;
        height: 50px;
      }

      <div id="top">
        <div id="but1">1</div>
        <div id="but2">2</div>
        <div id="but3">3</div>
        <div id="but4">4</div>
      </div>

• 使用 calc()从宽度中减去边距:

  #but1, #but2, #but3, #but4 {
    width: calc(25% - 20px);
  }
  

      #top {
        background-color: red;
        width: 100%;
        height: 100px;
      }
      #but1, #but2, #but3, #but4 {
        float: left;
        width: calc(25% - 20px);
        background-color: blue;
        color: white;
        text-align: center;
        margin: 10px;
        height: 50px;
      }

      <div id="top">
        <div id="but1">1</div>
        <div id="but2">2</div>
        <div id="but3">3</div>
        <div id="but4">4</div>
      </div>

• 使用 flexible boxes (默认 flex-wrap: nowrap ):

  #top {
    display: flex;
  }
  

      #top {
        background-color: red;
        width: 100%;
        height: 100px;
        display: flex;
      }
      #but1, #but2, #but3, #but4 {
        float: left;
        width: 25%;
        background-color: blue;
        color: white;
        text-align: center;
        margin: 10px;
        height: 50px;
      }

      <div id="top">
        <div id="but1">1</div>
        <div id="but2">2</div>
        <div id="but3">3</div>
        <div id="but4">4</div>
      </div>