使列表项样式彼此独立答案

【问题标题】：Making list items style independantly of each other使列表项样式彼此独立
【发布时间】：2016-06-28 03:13:58
【问题描述】：

我有一个 ul，里面有几个列表项，由 h3s 和 lis 组成，类 id 为“close”。

我有一个悬停样式，可以扩展 h3s 上的字母间距，问题是，具有 close 类的项目也会扩展。在添加类之前，我尝试了一些不同的东西，比如第 n 个孩子等（所有这些都在代码中可见）。我希望在扩展 h3 时，关闭分类的 lis 保持相同的大小。

感谢任何帮助。

jsfiddle 在这里： https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0

CSS：

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;

}

HTML：

<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>

【问题讨论】：

您可以为每个列表项添加不同的类或 id 并相应地设置样式。
问题是包含h3标签的li的大小随着h3扩展，然后扩展ul以适应它，反过来，所有块ul 的级别子级。我们能否了解一下您想要达到的效果的目的是什么？可能有更好的方法。

标签： html css html-lists

【解决方案1】：

这是我的尝试。就像您看到的那样，我对您的代码进行了一些更改，加入了一些内容并进行了一些清理，但重点在于.close 的width 属性

https://jsfiddle.net/7eLmarnp/12/

【讨论】：

【解决方案2】：

问题是你没有定义宽度的任何元素，所以每个元素都有最大元素的宽度。

要完成您想要实现的目标，您可以根据自己的需要有很多解决方案。

您可以在其中一个父对象上定义一个固定宽度，例如 ul，并将 white-space: nowrap 属性添加到 h3（请参阅 the fiddle）：

ul {
    width: 200px;
}
#openClose li a h3{
    white-space: nowrap;
}

您还可以使用关闭按钮在您的 li 上设置固定宽度（请参阅the fiddle）：

#openClose li:nth-child(2n+2){
   width: 200px;
}

【讨论】：