html - UL 类不起作用？只有李工作？

Question

我两天前才开始使用 HTML/CSS。请放轻松。我目前正在建立一个网站。出于某种原因，我无法使用 CSS 呈现 HTML 类/id。为了让它工作，我必须为每个列表创建一个类。我如何使 ul 的类成为一个整体？ (当我取出 <li class="name_here> 时，所有样式都不再起作用)

HTML

<div>
    <ul class="navi">
        <li class="navi"><a href="http://www.bestfoodservice.us/product"><img src="../images/bestfoodservicesweb_07.jpg" width="104" height="67" /></a>
            <a href="http://www.bestfoodservice.us/company"><img src="../images/bestfoodservicesweb_09.jpg" width="105" height="67" /></a>
            <a href="http://www.bestfoodservice.us/facility"><img src="../images/bestfoodservicesweb_11.jpg" width="110" height="67" /></a>
            <a href="http://www.bestfoodservice.us/careers"><img src="../images/bestfoodservicesweb_13.jpg" width="105" height="66" /></a></li>
    </ul>
</div>

<div>
    <div>
        <ul class="lastbit">
            <li><img src="../images/bestfoodservicesweb_34.jpg" width="85" height="29"/></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_37.jpg" width="62" height="16" /></a></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_38.jpg" width="69" height="16" /></a></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_39.jpg" width="100" height="16" /></a></li>
        </ul>
        <ul class="lang">
            <li class="lang"><a href="#"><img src="../images/bestfoodservicesweb_41.jpg" width="29" height="14" /></a></li>
            <li class="lang"><a href="#"><img src="../images/bestfoodservicesweb_43.jpg" width="39" height="17" /></a></li>
        </ul>
        <ul class="social">
            <li class="social"><a href="http://facebook.com"><img src="../images/bestfoodservicesweb_27.jpg" width="30" height="29" /></a></li>
            <li class="social"><a href="http://twitter.com"><img src="../images/bestfoodservicesweb_29.jpg" width="30" height="29" /></a></li>
            <li class="social"><a href="http://linkedin.com"><img src="../images/bestfoodservicesweb_31.jpg" width="30" height="29" /></a></li>
        </ul>
    </div>
</div>

CSS

.navi {
    list-style: none;
    display: inline;
    margin-left: 5px;
    position: relative;
    top: 5px;
}
.lastbit {
    list-style: none;
    display: inline-block;
}
.lang {
    list-style: none;
    display: inline;
}
.social {
    list-style: none;
    display: inline;
}

Answer 1

您应该阅读更多关于 CSS 选择器的内容。简而言之，你在做什么:

.social {
    list-style: none;
    display: inline;
}

表示所有具有 social 类的东西都应用了给定的样式。

当您在每个 li 元素上都有该类时，它会根据需要应用。但是，当您将该类放在 ul 上时，它会将样式应用于 ul 而不是 li。要解决此问题，您需要通过稍微更改选择器来指定您想要 li 上的样式:

.social li {
    list-style: none;
    display: inline;
}

上面说所有属于 social 类的元素的后代的 li 元素应该具有您想要的样式。