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。これを試して。: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 に答える