在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 user1328021

使用背景圖片來代替？ – 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的所有鏈接的右側添加分隔符圖像。對於列表中的最後一項，您不需要應用該類。

來源

2013-03-18 23:25:14 sweetamylase

不要用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; 
}

來源

2013-03-18 23:27:27 insertusernamehere

在CSS中設置邊框的高度

回答

相關問題