我有一个列表菜单。在小宽度上,我希望边框底部使用完整宽度:
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
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>
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>