div 宽度问题 （高手解答）

[江左梅郎1]

小弟新写了一个DIV css 如下

.div270 {
height: 36px;
width: 282px;
margin-top: 0px;
margin-left: 0px;
float: left;

}

前端为
<div class="div270">
<p class="txt2zi">
<input name="" type="text" />
<p class="imgbumen"></p>
</div>

.txt2zi
{
margin-top: 10px;
margin-left: 16px;
float:left;
}

.imgbumen {
background-image: url(../img/bumen_0132.png);
float: left;
height: 32px;
width: 32px;
margin-top: 5px;
margin-left: 17px;
}

input
{
font-family: "新宋体", "宋体";
font-size: 14px;
color: #006699;
border: 1px solid #BFDFFF;
background-color: #F6F6F6;
height: 20px;
width: 215px;
font-style: normal;
line-height: 20px;
}

请高手帮我解答 为什么？ 16+215+2（input border）+17+32=282

却溢出了呢？ div 宽度改为284 就没事了呢？ 多出的2px 哪来的呢？

[碧海情天-赵亮]

16，17这两个margin-left,起始点是在你想像的位置的右面1PX处。
比如有第一块DIV宽10，第二块margin-left时，是从11开始算的，而不是10，这样就比你计算的多了一个像素。你这里有两个margin-left,所以就少算了2PX。

[碧海情天-赵亮]

[Quote=引用 1 楼 theforever 的回复:]
16，17这两个margin-left,起始点是在你想像的位置的右面1PX处。
比如有第一块DIV宽10，第二块margin-left时，是从11开始算的，而不是10，这样就比你计算的多了一个像素。你这里有两个margin-left,所以就少算了2PX。
[/Quote]
简单说，对象之间是并列挨着的。下一个对象margin-left的计算应该是以它自身的开始位置计算，而你的计算位置是在上一个对象的右边界处，导致使它们重合了1PX。而这样的计算失误发生了两次，就是这样结果。

[碧海情天-赵亮]

更清楚地说，就是边界外和边界内。

[athrunzero]

LZ是指<p class="imgbumen"></p>跑到下面去了么？

[cnn521258]

在浮动元素的float:left;后面加上display:inline;就可以了,兼容IE6。
{
float:left;
display:inline;
...
...
}

[碧海情天-赵亮]

加display:inline;了，margin-left就没了。