float元素内元素含有border属性之后页面变形问题，求

一瓢清风2 2014-04-10 07:39:43

<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 	<style>

	.input200{width:190px;}

	.orgClumn{float:left;display:block;min-width:250px;}

	.orgClumn .orgClumnName{display:block;width:75px;float:left;}

	</style>

 </head>

 <body><span style="width: 546px; height: 100px; padding: 10px 20px;border:1px solid;display:block;">

 <span class="orgClumn"><span class="orgClumnName">a</span><input class="input200" type="text"></span>

 <span class="orgClumn"><span class="orgClumnName">b</span><input class="input200" style="border:1px solid;" type="text"></span>

 <span class="orgClumn"><span class="orgClumnName">c</span><input class="input200" type="text"></span>

 <span class="orgClumn"><span class="orgClumnName">d</span><input class="input200" type="text"></span>

 <span class="orgClumn"><span class="orgClumnName">e</span><input class="input200" type="text"></span>

 <span class="orgClumn"><span class="orgClumnName">f</span><input class="input200" type="text"></span>

 </span>

 </body>

</html>

c这个元素直接出现在了右边，为什么不是左边，去掉b元素后边的border属性之后一切正常，求解释！
style="border:1px solid;" 这个是罪魁祸首

...全文

224 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

一瓢清风2 2014-04-11

打赏
举报

自己顶一下！

wzhiyuan 2014-04-11

打赏
举报

1，浏览器input默认样式是2px inset， 2，你手动设置 b处的input style="border:1px solid;"后，使b块高度变小了， 3，对于float：left的元素来说，它总是先试图排在前一个元素的右边，如果右边宽度不够，它会排到下一行的最左边。所以对于你的这种情况，c它排在b的下边就不奇怪了。要想按让它按预想的对齐，解决方法也很简单： 1，可以设置b处的input 的bordex为2即 style="border:2px solid;" 或者 2，你可以给orgClumn设置一个高度, .orgClumn{float:left;display:block;min-width:250px;height:30px;}