css - 菜单列表项 : Full width (border-bottom)?

Question

我有一个列表中的菜单。在小宽度上，我希望 border-bottom 使用全宽:

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

没有背景图片，您将不得不发挥创意。这个怎么样……

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

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

body {
    background-color: #eee;
}
#wrapper {
    width: 300px;
    padding: 1em;
    background-color: #fff;
}
a {
    color:inherit;
    text-decoration: none;
}
#menu {
    overflow: hidden;
    list-style:inline;
    padding: 0 0 2px;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin: 0 1em 1em;
}
#menu li {
    display: inline-block;
	margin-top: 2px;
    margin-bottom: -2px;
    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;
}
#menu li:not(.active) {
    border-bottom: 2px solid #ccc;
}
#menu li.active {
    border-bottom: 2px solid red;
}
#menu li:not(:last-of-type) {
    margin-right: -.275em;
}
#menu li a {
    padding: .5em 1em;
    box-sizing: border-box;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>