2

I have the following code:

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>

What should I put in CSS #page #bar to eliminate the extra part outside the red box ?

Here is the jsFiddle.

4

8 回答 8

4

只需删除width: 100%;

默认情况下，块元素（likediv）将填充其容器的宽度（注意填充）

演示在 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/

于 2013-10-07T10:32:27.703 回答
3

您需要指定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应用于内容 - 内容区域的宽度与父级相同。

于 2013-10-07T10:34:15.643 回答
1

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

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

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

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

于 2013-10-07T11:15:44.207 回答
0

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

只需添加overflow: hidden，#page“副作用”也将得到解决。

这是一个jsFiddle演示。

于 2013-10-07T11:05:03.817 回答
0

你可以使用这个类

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

jsFiddle

于 2013-10-07T10:34:24.457 回答
0

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

演示

于 2013-10-07T10:35:11.697 回答
0

在#page #bar 中将宽度更改为 97%

于 2013-10-07T10:35:48.310 回答
0 
#page #bar {
    padding-left: 10px;
    position: relative;
    right: 0;
    left: 0;
    border: 1px solid #00F;
}
于 2013-10-07T10:39:26.403 回答