菜單列表項目：全寬（邊界 - 底部）？

Question

我有一個列表中的菜單。在小寬度我想要的下邊框使用全寬：

HTML：

<div id="wrapper"> 
    <ul id="menu"> 
     <li class="active"><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2 with Text</a></li> 
     <li><a href="#">Item 3 with more Text</a></li> 
     <li><a href="#">Item 4</a></li> 
     <li><a href="#">Item 5 with Text</a></li> 
    </ul> 
</div> 

CSS：

#menu li { 
    display: inline-block; 
} 
#menu li:not(.active) { 
    border-bottom: 2px solid #ccc; 
} 
#menu li.active { 
    border-bottom: 2px solid red; 
} 
#menu li a { 
    padding: .5em 1em; 
    box-sizing: border-box; 
    display: block; 
} 

測試：Fiddle

Answer 1

沒有背景即時通訊年齡，你將不得不變得富有創造力。這個怎麼樣？

#menu { 
    overflow: hidden; 
    padding: 0 0 2px; 
} 
#menu li { 
    display: inline-block; 
    position: relative; 
    z-index: 2; 
} 
#menu li:after { 
    content: " "; 
    position: absolute; 
    bottom: -2px; 
    right: -1000px; 
    width: 1000px; 
    height: 0; 
    border-bottom: 2px solid #ccc; 
    z-index: 1; 
} 

更新小提琴：jsfiddle.net/xrz39p4L/12/

Answer 2

Flexbox的（如由路易斯P.A.提）可以通過使li裝滿ul的整個寬度和包裝要求幫助這裏。

Flexbox支持IE10及更高版本。

var li = $("#menu li"); 
 

 
li.click(function() { 
 
    li.removeClass("active"); 
 
    $(this).addClass("active"); 
 
});

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background-color: #eee; 
 
} 
 
#wrapper { 
 
    width: 300px; 
 
    padding: 1em; 
 
    background-color: #fff; 
 
} 
 
a { 
 
    color: inherit; 
 
    text-decoration: none; 
 
} 
 
#menu { 
 
    list-style: none; 
 
    padding: 0; 
 
    -webkit-margin-before: 0; 
 
    -webkit-margin-after: 0; 
 
    margin: 0 1em 1em; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#menu li { 
 
    flex: 1 1 auto; 
 
    position: relative; 
 
} 
 
#menu li:not(.active) { 
 
    border-bottom: 2px solid #ccc; 
 
} 
 
#menu li.active { 
 
    border-bottom: 2px solid red; 
 
} 
 
#menu li:not(:last-of-type) {} #menu li a { 
 
    padding: .5em 0; 
 
    box-sizing: border-box; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <ul id="menu"> 
 
    <li class="active"><a href="#">Item 1</a> 
 
    </li> 
 
    <li><a href="#">Item 2 with Text</a> 
 
    </li> 
 
    <li><a href="#">Item 3 with more Text</a> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    </li> 
 
    <li><a href="#">Item 5 with Text</a> 
 
    </li> 
 
    </ul> 
 
</div>