的CSS

Question

在我的标记（bootstrap）中，我无法使用border在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

这里有几件事情：

我添加了一个样式，以便在直线div上有一个边框。
我确保你的状态换行中的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的原因是因为您没有浮动该特定容器中的任何子项，因此它只是额外的标记。

firebug / chrome督察员是调试这些东西的绝佳工具，因为他们会清楚地告诉你什么是在哪里以及它在做什么。

Answer 2

我假设你试图在元素顶部和底部之间有一个边界，所以我得到了你：

jsFiddler：http://jsfiddle.net/theStudent/sU2yu/

<强> CSS

.status-wrap {
  text-align: center;
  background: #EEE;
  height: 40px;
  margin-left: -20px;
  margin-right: -10px;
  margin-top: 10px;
  border-bottom:1px solid #ccc;
}
.status-wrap div {
  padding-top: 12px;
}

我所做的只是在顶部div添加了一个底部边框。

非li标记上的分隔符

2 个答案:

的CSS