html - 浏览器中的菜单缩放

Question

虽然在浏览器菜单中按比例缩小已中断 - 流到下一行。代码有什么问题？尽管它硬编码为 198px，但在缩放时 Div 宽度会发生变化。 没有边框就OK了，但是我必须要用边框。

#horizontal-multilevel-menu {
  border-right: 1px solid #769510;
  border-left: 1px solid #cde67b;
}
#horizontal-multilevel-menu {
  margin: 0;
  padding: 0;
  background: #a0bf38;
  min-height: 52px;
  width: 100%;
  list-style: none;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
#horizontal-multilevel-menu a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  text-align: center;
  padding: 15px 40px !important;
}
#horizontal-multilevel-menu div {
  float: left;
  border-left: 1px solid #769510;
  border-right: 1px solid #cde67b;
  width: 198px;
}

<div id="horizontal-multilevel-menu">
  <div><a href="/1/" class="root-item">1</a>
  </div>
  <div><a href="/2/" class="root-item">2</a>
  </div>
  <div><a href="/3/" class="root-item">3</a>
  </div>
  <div><a href="/4/" class="root-item">4</a>
  </div>
  <div><a href="/5/" class="root-item">5</a>
  </div>
</div>

Answer 1

可能您需要 box-sizing 来解决这个问题。

* {
  box-sizing: border-box;
}
#horizontal-multilevel-menu {
  border-right: 1px solid #769510;
  border-left: 1px solid #cde67b;
}
#horizontal-multilevel-menu {
  margin: 0;
  padding: 0;
  background: #a0bf38;
  min-height: 52px;
  width: 100%;
  list-style: none;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
#horizontal-multilevel-menu a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  text-align: center;
  padding: 15px 40px !important;
}
#horizontal-multilevel-menu div {
  float: left;
  border-left: 1px solid #769510;
  border-right: 1px solid #cde67b;
  width: 199px;
}

<div id="horizontal-multilevel-menu">
  <div><a href="/1/" class="root-item">1</a>
  </div>
  <div><a href="/2/" class="root-item">2</a>
  </div>
  <div><a href="/3/" class="root-item">3</a>
  </div>
  <div><a href="/4/" class="root-item">4</a>
  </div>
  <div><a href="/5/" class="root-item">5</a>
  </div>
</div>