我试图为导航栏的目的向div添加底部边框。我想要达到的效果:
目前,我有以下代码:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item a.current {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
<a href="#">Page 2</a>
</div>
<div class="item">
<a href="#">Page 3</a>
</div>
<div class="item">
<a href="#">Page 4</a>
</div>
<div class="item">
<a href="#">Page 5</a>
</div>
<div class="item">
<a href="#">Page 6</a>
</div>
</div>
我找不到在div内容和底部边框之间添加空白空间的方法,除非它与div背景颜色相同。
就目前而言,您无法执行此操作。您不能在元素与其自身的边框之间添加间隙。但是,可以将边框添加到其父元素(div.item
在本例中为元素),然后添加padding-bottom
到同一元素以将其与元素分开a
:
$("a").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item.current {
border-bottom: 2px solid red;
padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item current">
<a href="#">Page 1</a>
</div>
<div class="item">
<a href="#">Page 2</a>
</div>
<div class="item">
<a href="#">Page 3</a>
</div>
<div class="item">
<a href="#">Page 4</a>
</div>
<div class="item">
<a href="#">Page 5</a>
</div>
<div class="item">
<a href="#">Page 6</a>
</div>
</div>
请注意,我还修改了JavaScript,以将此类添加.current
到li
元素而不是clickeda
元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句