CSS HTML问题 - 工具栏扩展得太远

Question

这是我正在使用的代码：

http://jsfiddle.net/btya7/

我无法弄清为什么工具栏（蓝色）延伸到文本框的右侧。似乎没有任何填充物或边缘错过。

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

.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;纠正布局（如果您针对的所有浏览器都支持属性）。

Answer 3

似乎有2px填充。如果我卸下填充物，则看起来还可以。

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

http://jsfiddle.net/btya7/5/

Answer 4

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