Question

我有以下代码：

CSS

#page {
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
}
#page #bar {
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;
}

HTML

<div id="page">
    <div id="bar">1 2 3 4 5 6 7 8 9 0</div>
</div>

我应该在CSS #page #bar中添加什么来消除红框外的额外部分？

这是jsFiddle。

Answer 1

只需删除width: 100%;

即可

块元素（，如div ）将默认填充其容器的宽度（处理填充）

演示 http://jsfiddle.net/Ege2Y/1/

这不是副作用。它是应该基于当前盒子模型的方式。

如果您（不在您的情况下）指定宽度，那么您可以更改该box-sizing属性规则

#page #bar {
    width:100%;
    padding-left: 10px;
    border: 1px solid #00F;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

演示 http://jsfiddle.net/Ege2Y/4/

Answer 2

您需要指定box-sizing属性：

#page #bar {    
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;

   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

这意味着100% width适用于整个元素，包括边框 - 因此嵌套元素将调整大小，使其边框位于父元素内。

默认值为content-box，表示100% width应用于内容 - 内容区域的宽度与父级相同。

Answer 3

通过将 padding-left 设置为#bar元素，确切地知道您要完成的任务，但是您可以使用删除左侧不需要的填充：last- child CSS伪类如下所示：

#page #bar:last-child {
    padding-left: 0;
}

这是一个实现同样事情的小提琴：http://jsfiddle.net/Ege2Y/9/

PS：至少box-sizing不会解决这个问题

Answer 4

你可以使用这个课程

#page #bar {
    width: 98%;
    padding-left: 2%;
    border: 1px solid #00F;
}

jsFiddle

Answer 5

您应该将宽度减小到something like 97%

demo

Answer 6

在#page #bar

中将宽度更改为97％

Answer 7

#page #bar {
    padding-left: 10px;
    position: relative;
    right: 0;
    left: 0;
    border: 1px solid #00F;
}

Answer 8

虽然选择了最佳答案，但我想分享另一种方法。

只需在overflow: hidden中添加#page，即可解决“副作用”。

这是jsFiddle演示。

消除填充左侧的副作用

8 个答案: