Html 使列表项的样式相互独立
我有一个ul,里面有几个列表项,由h3s和lis组成,类id为“close” 我有一个悬停样式,可以扩展H3上的字母间距,问题是,具有close类的项也会扩展。在添加该类之前,我尝试了一些不同的方法,比如nth child等(所有这些都在代码中可见)。我希望在H3扩展时,分类相近的lis保持相同的大小 感谢您的帮助 请点击此处: CSS: } HTML:Html 使列表项的样式相互独立,html,css,html-lists,Html,Css,Html Lists,我有一个ul,里面有几个列表项,由h3s和lis组成,类id为“close” 我有一个悬停样式,可以扩展H3上的字母间距,问题是,具有close类的项也会扩展。在添加该类之前,我尝试了一些不同的方法,比如nth child等(所有这些都在代码中可见)。我希望在H3扩展时,分类相近的lis保持相同的大小 感谢您的帮助 请点击此处: CSS: } HTML: 问题是没有任何定义宽度的元素,因此每个元素都具有最大元素的宽度 要实现您想要实现的目标,您有很多解决方案,这取决于您的需求
问题是没有任何定义宽度的元素,因此每个元素都具有最大元素的宽度
要实现您想要实现的目标,您有很多解决方案,这取决于您的需求
您可以在其中一个父级上定义固定宽度,例如ul,并将空白:nowrap
属性添加到h3(请参阅):
您还可以使用“关闭”按钮在li上设置固定宽度(请参阅):
这是我的尝试。就像你看到的那样,我对你的代码做了一些修改,加入了一些东西,并进行了一些清理,但重点是
的宽度属性。close
您可以向每个列表项添加不同的类或id,并相应地设置每个项的样式。问题是,包含h3
标记的li的大小随着h3
扩展,然后扩展ul
以适应它,反过来,扩展ul
的所有块级子项。我们可以了解一下你想要达到的效果的目的是什么吗?也许有更好的办法。
a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
position:absolute;
top:200px;
margin-top:55px;
}
#openClose li{
list-style-type:none;
display:block;
padding-right:-50px;
}
#openClose li:nth-child(2n+2){
margin:30px 0 100px 0;
background-color:#000;
border:2px #fff solid;
text-align:center;
letter-spacing:1rem;
padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem;
transition:.3s;
}
#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}
.close{
}
#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}
a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff;
<section id="openClose">
<ul>
<li><a href="#wrapper"><h3>Tool Descriptions</h3></a></li>
<li class="close"><a href="#">Close</a></li>
<li><a href="#wrapper2"><h3>Key tools</h3></a></li>
<li class="close"><a href="#">Close</a></li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close"><a href="#">Close</a></li>
</ul></section>
ul {
width: 200px;
}
#openClose li a h3{
white-space: nowrap;
}
#openClose li:nth-child(2n+2){
width: 200px;
}