Question

HTML

<div id="box-1">
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
  <div class="sub-box"></div>
</div>
<div id="box-2">
  <div class="sub-box"></div>
</div>

CSS

#box-1 {
  width: 500px;
  height: 100px;
  overflow: auto;
  background: black;
}
#box-2 {
  width: 500px;
  height: 100px;
  background: red;
}
.sub-box {
  width: 20%;
  height: 30px;
  border-right: 5px solid #FFF;
}

http://codepen.io/Calum/pen/IEbKj

两个子框的边框不匹配。我不想给两个子框滚动条。我不想将20％更改为像素值。

如何让边框排成一行？为什么会这样？

Answer 1

滚动条是由浏览器生成的，根据我的经验，每个浏览器都以自己独特的方式绘制它们...获得此像素完美的唯一方法是删除浏览器生成的滚动条并将其替换为自定义的滚动条。一个插件...（如果您进行谷歌搜索，有几个选项）

一个例子：http://manos.malihu.gr/jquery-custom-content-scroller/

通过这种方式，您可以调整div和滚动条的大小和位置，以实现最佳的跨浏览器体验

Answer 2

边框不对齐，因为滚动条从#box-1的宽度中减去。 20%的{{1}} - 500px使得框1的宽度略小，因此将边框放在几个像素上。

如果您想滚动，则无法使用<scrollbar>作为宽度。

Answer 3

尝试删除overflow：auto;来自＃box-1

当一个div有滚动条时，将边框对齐

3 个答案: