一个div中有两个inline-block元素,width都是50%,为什么第二个会被挤下去?

问题如下所示:图片描述

div中嵌套的section样式:

  .padding-right {
    display: inline-block;
    padding-right : 20px;
    width: 50%;
    box-sizing: border-box;
    vertical-align: middle;
  }
  .padding-left {
    display: inline-block;
    padding-left: 20px;
    width: 50%;
    box-sizing: border-box;
    vertical-align: middle;
  }

这样写如上图所示,safe即第二块section就会被挤下去,width改小写比如49.5%就可以了,但是整体宽度就会变成99%,最右边会出现与上下块不对齐的现象。

有没有办法让两个scetion回到同一行上并且不会出现width变短导致的不对齐的问题?

阅读 9.6k
6 个回答

2 个元素之间有一个空白字符,空白字符也占用宽度的,可以把 div 的字体大小设置为 0 然这个空白字符不占据宽度。

padding-right : 20px;
padding-left: 20px;

widthbordermarginpadding,四項相加之和才是所佔寬度。

补充楼上的,
在有些浏览器下,inline-block,会多出几个像素的间距

新手上路,请多包涵

行内元素默认样式

新手上路,请多包涵

父级元素的字体大小(对应题主这里div元素),font-size设置成0,子元素(对应这里的selection元素)中设置具体的字体大小。原因,由于两个子元素也就是这里的selection元素中间有空白文本节点,并且继承父元素div的font-size(浏览器有默认的font-size,设置成0即可)。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题