意想不到的CSS行为？
意想不到的CSS行为？
提问于 2015-07-11 01:29:52
在玩没有父母高度的容器的全部高度的分隔线时，我无意中发现了下面的场景。有谁能理解为什么将分隔符设置为position:absolute和display:inline-block并不会导致它们像预期的那样一直浮动到父容器的左侧？为什么他们实际上是内联的？
HTML
<div class="wrapper">
<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>
</div>CSS
.wrapper{
width:100%;
text-align:center;
position: relative;
}
.box{
display: inline-block;
width: 150px;
height: 100px;
background: red;
margin: 0 0 0 5px;
}
.divider{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: black;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-11 01:36:30
这是因为left和right都是auto。
然后，根据第10.3.7节的说法
如果“左”和“右”是“自动”，“宽度”不是“自动”，那么如果建立静态位置]包含块的元素的“方向”属性为“ltr”设置为“静态位置”，否则将“右”设置为“静位”。然后解“左”(如果‘方向’是'rtl')或‘右’(如果‘方向’是'ltr')。
其中，静态位置定义为
“左侧”的静态位置是从包含块的左侧边缘到假设框的左侧边缘的距离，如果元素的“位置”属性为“静态”，而“浮点数”为“无”，则该框将是元素的第一个框。
如果不希望这样，请指定一个值：
.divider {
left: 0;
}Stack Overflow用户
发布于 2015-07-11 01:37:28
如果希望所有分隔符保持在其父节点的左侧，请更改其显示样式。
而不是：
display: inline-block;用途：
display: block;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31352548
复制相关文章
相似问题
腾讯云开发者
