在我的标记( Bootstrap )中,我不能使用边框在 2 个元素之间制作分隔符
<div class="status-wrap">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 straight-line">
<span>Interview Invitation</span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<span>Invited 7 Jan 2014</span>
</div>
<div style="clear:both"></div>
</div>
最佳答案
我认为这就是您想要做的: http://bootply.com/104903
这里有几件事:
- 我添加了一种样式,使直线 div 上有边框。
- 我确保将 status-wrap 内的 div 设置为 100% 高度,这使它们占据父级的整个高度,从上到下一直延伸该线。
CSS
.status-wrap {
text-align: center;
background: #EEE;
height: 40px;
margin-left: -20px;
margin-right: -10px;
margin-top: 10px;
}
.status-wrap div {
padding-top: 12px;
height: 100%;
}
.straight-line {
border-right: 1px solid black;
}
在标记中,我所做的只是删除底部的 div。如果您正在寻找一个 clearfix div,则可以添加更多样式属性,例如 height:0px;visibility:hidden;等等 这将在应用 clearfix 时隐藏 div。此时您不需要 clearfix 的原因是因为您没有在该特定容器中 float 任何子项,所以它只是额外的标记。
firebug/chrome inspector 是调试这些东西的好工具,因为它们会立即清楚地告诉您什么是什么,它在做什么。
关于html - 非 li 标记上的分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21057023/