float元素内元素含有border属性之后页面变形有关问题，求
日期：2014-05-16 浏览次数：20660 次
float元素内元素含有border属性之后页面变形问题，求
c这个元素直接出现在了右边，为什么不是左边，去掉b元素后边的border属性之后一切正常，求解释！
style="border:1px solid;" 这个是罪魁祸首
------解决方案--------------------
浏览器input元素默认边框宽度与你设置其中一个输入框的宽度不一样. 这边测试浏览器默认为2px,于是:
当span c向左浮动时,会碰到span a后的输入框，最终位置就是停在了span b的下面了
------解决方案--------------------
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;}
<!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;" 这个是罪魁祸首
------解决方案--------------------
浏览器input元素默认边框宽度与你设置其中一个输入框的宽度不一样. 这边测试浏览器默认为2px,于是:
当span c向左浮动时,会碰到span a后的输入框，最终位置就是停在了span b的下面了
------解决方案--------------------
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;}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
