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

Question

这是我正在使用的代码：

我无法弄清楚为什么工具栏（蓝色）超出了文本框的右侧。似乎没有任何填充或边距错过。

我将它应用为蓝色和粉红色以帮助显示它：

.uEditorToolbar {background-color: blue;}

有人可以给一些指导吗？

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

的默认显示<ul>是块，所以width:100%无论如何可能是不必要的。

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

box-sizing或者，可以使用CSS3属性来更正布局box-sizing: border-box;（如果您所针对的所有浏览器都支持该属性）。

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2012-10-29T14:21:35.567 回答

4 回答 4