0

我在列表上有一个左/右边框来创建分离效果。例如：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>
4

2 回答 2

1

不要用divider-element 来破坏你的列表。尝试这个。:after您可以轻松调整使用伪元素创建的边框的大小/高度：

演示

先试后买

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;
}
于 2013-03-18T23:27:27.027 回答
0

长度将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类的链接的右侧添加分隔图像。对于列表中的最后一项，您不需要应用该类。

于 2013-03-18T23:25:14.117 回答