在CSS中设置边框的高度

问题描述：

我在列表上有一个左/右边框来创建分隔效果。例如：Link1 | Link2 | ...在CSS中设置边框的高度

我希望边框上的线条比对象的总高度稍短 - 可能是总高度的50％并垂直居中。但是，它们是100％的高度。如何在边框上设置高度并垂直居中？

谢谢！

<ul class="nav pull-right" style="line-height:30px;"> 
    <li class="dropdown pull-right" style="line-height:20px;border-left: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      {% if notice_unseen_count %} <span class="badge badge-warning" style="line-height:15px;">{{ notice_unseen_count }}</span>{% else %}<span class="badge" style="line-height:15px;">0</span>{% endif %} 
     </a> 
     <ul class="dropdown-menu"> 
     <li><a href="{% url messages_inbox %}">Inbox</a></li> 
      <li class="divider"></li> 
      <li><a href="{% url invitations %}">Invitations</a></li> 
      <li class="divider"></li> 
      <li><a href="{% url notification_notices %}">All Notifications</a></li> 
     </ul> 
    </li>

使用背景图片来代替？ – 2013-03-18 23:16:43

您可以在[jsfiddle]（http://jsfiddle.net/）这样的东西中创建一个工作示例，以便人们可以看到您的问题并轻松地尝试提供帮助吗？ – 3dgoo 2013-03-18 23:22:59

给定的代码示例不包含'divider'类定义，并没有帮助。 – alexp 2013-03-18 23:23:12

答

的border长度将总是> =元件的宽度/高度，这样就可以不将其设置为50％或任何东西。查看包装盒型号：http://css-tricks.com/the-css-box-model/

如果要对这些分隔条进行样式设置，建议使用背景图像。

.divider { 
    background: transparent url('link/to/separator.gif') right center no-repeat; 
    padding: auto 10px; 
}

这将在类别divider的所有链接的右侧添加分隔符图像。对于列表中的最后一项，您不需要应用该类。

答

不要用divider -element炸掉你的列表。尝试这个。您可以轻松地调整边框的由使用:after伪元素创建尺寸/高度：

演示

Try before buy

HTML

<ul> 
    <li><a href="{% url messages_inbox %}">Inbox</a></li> 
    <li><a href="{% url invitations %}">Invitations</a></li> 
    <li><a href="{% url notification_notices %}">All Notifications</a></li> 
</ul>

CSS

ul { 
    margin: 0; 
    padding 0; 
    list-style: none; 
} 

ul > li { 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    background: red; 
} 

ul > li:after { 
    content: ''; 
    display:block; 
    float: right; 
    height: 15px; 
    width: 1px; 
    background: #ccc; 
    margin: 7px 10px 0 10px; 
}

末 “边界”

从最后一个元素删除边框，这CSS规则做这项工作：

ul > li:last-child:after { 
    content: none; 
}

在CSS中设置边框的高度

相关推荐