Question

这是我正在使用的代码：

我无法理解为什么工具栏（蓝色）延伸超过文本框的右侧。似乎没有任何填充或边距错过。

我用蓝色和粉红色来帮助显示它：

.uEditorToolbar {background-color: blue;}

有人可以提供一些指导吗？

Answer 1

uEditorToolbar有两个额外的填充像素。 width:100%设置宽度不包括填充。如果需要填充，您可以删除width:100%，蓝色条不会延伸太远。

这是你需要的，还是我错过了什么。

Answer 2

CSS标准指定的默认布局样式意味着测量宽度和高度属性仅包括内容，但不包括边框，边距或填充。因此，width:100%和padding: 0 0 0 2px;的组合将内容推出2px。

<ul>的默认显示是阻止，因此width:100%可能是不必要的。

如果您移除width:100%或padding-left将解决问题。

或者，CSS3 box-sizing属性可用于使用box-sizing: border-box;更正布局（如果您定位的所有浏览器都为support the property）。

Answer 3

似乎有2px填充。如果我删除填充，那么看起来没问题。

.uEditor .uEditorToolbar
{
    list-style: none;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 0 0 2px;
}

Answer 4

从width:100%; padding: 2px; CSS类中删除.uEditor .uEditorToolbar。它会起作用。