最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

float元素内元素含有border属性之后页面变形问题,求_html/css

来源:懂视网 责编:小采 时间:2020-11-27 16:33:10
文档

float元素内元素含有border属性之后页面变形问题,求_html/css

float元素内元素含有border属性之后页面变形问题,求_html/css_WEB-ITnose: Document .input200{width:190px;} .orgClumn{float:left;display:block;min-width:250px;} .orgClumn .orgClumnName{display:block;width:75px;float:left;} a b c d e f c这个元素直接出现在了右边,为什么不是左边,去掉b元素后边的border属性之后一切正常,求解释! style=border:1px s
推荐度:
导读float元素内元素含有border属性之后页面变形问题,求_html/css_WEB-ITnose: Document .input200{width:190px;} .orgClumn{float:left;display:block;min-width:250px;} .orgClumn .orgClumnName{display:block;width:75px;float:left;} a b c d e f c这个元素直接出现在了右边,为什么不是左边,去掉b元素后边的border属性之后一切正常,求解释! style=border:1px s

   Document 	   a b c d e f 

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;}

文档

float元素内元素含有border属性之后页面变形问题,求_html/css

float元素内元素含有border属性之后页面变形问题,求_html/css_WEB-ITnose: Document .input200{width:190px;} .orgClumn{float:left;display:block;min-width:250px;} .orgClumn .orgClumnName{display:block;width:75px;float:left;} a b c d e f c这个元素直接出现在了右边,为什么不是左边,去掉b元素后边的border属性之后一切正常,求解释! style=border:1px s
推荐度:
标签: 之后 页面 问题
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top