html - 非 li 标记上的分隔符

Question

在我的标记( 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>

DEMO here

Answer 1

我认为这就是您想要做的: http://bootply.com/104903

这里有几件事:

1. 我添加了一种样式，使直线 div 上有边框。
2. 我确保将 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 是调试这些东西的好工具，因为它们会立即清楚地告诉您什么是什么，它在做什么。