浏览器中的菜单缩放

Question

虽然在浏览器菜单中按比例缩小已经打破 - 但是下一行会显示流量。代码有什么问题？虽然硬编码198px，但是在缩放时划分宽度。 没有边框一切都可以，但我必须使用边框。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>