Question

我在列表上有一个左/右边框来创建分离效果。例如：Link1 | Link2 | ...

我希望边框上的线条比对象的总高度略短 - 可能是总高度的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>

Answer 1

请勿使用divider - 元素炸毁您的列表。试试这个。您可以使用: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;
}

Answer 2

border长度始终为＆gt; =元素的宽度/高度，因此您无法将其设置为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类的所有链接的右侧。对于列表中的最后一项，您无需应用该类。

在CSS中设置边框的高度

2 个答案: