gpt4 book ai didi

css - 副词。带有CSS的样式列表

转载 作者:太空宇宙 更新时间:2023-11-04 05:32:30 27 4
gpt4 key购买 nike

我需要像下图一样设置常规 html 列表的样式:

alt text

如您所见,每个列表项的两侧都有一个填充和一个顶部和底部边框。悬停时,边框的宽度为 <ul> 的 100%元素。现在问题实际上是:当你给每个 <li>元素顶部和底部边框我在每个元素之间有一个 2 px 的边框(第一个元素的底部边框和第二个元素的顶部边框),我不想要那个但是我不知道任何解决方案。

我的 html:

<div id="tab_top" class="tab">
<div class="bottom">
<div class="cont">
<ul>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
<li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li>
</ul>
</div>
</div>
</div>

我的CSS:

#tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;}
#tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;}
#tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;}
#tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;}

如果你能帮助我,我会很高兴

诚挚的

最佳答案

如果你使用 border-top 和 border-bottom,你是对的,你会得到一个 1px 的边框,但是如果你同时使用两者,那么像这样指定 li+li :

.tab div.cont ul li { border-top: 1px solid black; border-bottom:1px solid black; }
.tab div.cont ul li + li { border-top:none; }

你会得到你声称想要的。

关于css - 副词。带有CSS的样式列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2403365/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com