文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS HTML问题-工具栏扩展过多

问CSS HTML问题-工具栏扩展过多
EN

Stack Overflow用户

提问于 2012-10-29 22:04:42

回答 4查看 152关注 0票数 1

这是我正在使用的代码：

http://jsfiddle.net/BTYA7/

我搞不懂为什么工具栏(蓝色)会延伸到文本框的右侧。似乎没有任何填充或空白处丢失。

我把它涂在蓝色和粉色上，以帮助展示它：

.uEditorToolbar {background-color: blue;}

有谁能给我指点一下吗？

css

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-10-29 22:11:10

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

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

票数 3

Stack Overflow用户

发布于 2012-10-29 22:11:51

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

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

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

或者，可以使用CSS3 box-sizing属性通过使用box-sizing: border-box;来更正布局(如果您针对的是support the property的所有浏览器)。

票数 1

Stack Overflow用户

发布于 2012-10-29 22:18:29

似乎有2px的填充。如果我去掉填充，那么它看起来没问题。

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

http://jsfiddle.net/BTYA7/5/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13123166

复制

相似问题

问CSS HTML问题-工具栏扩展过多
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS HTML问题-工具栏扩展过多EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS HTML问题-工具栏扩展过多
EN