UL类不起作用？只有LI有效吗？

Question

UL类不起作用？只有LI有效吗？

3

我两天前才开始学习HTML/CSS...请轻一点，我正在建设一个网站。出于某种原因，我无法使用CSS渲染HTML的class/id。为了使其工作，我必须为每个列表都创建一个类。如何使整个ul标签作为一个类？（当我删除

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

- Thomas

1

对不起，我不明白你的问题。能否再清楚一点？ - user1618143

我正在尝试查看我在类/ID方面做错了什么。正如您在我的HTML中所看到的，如果每个'<li>'都有自己的类，则类/ID将与CSS一起使用，但是当我将"<li class=" title_here'> "删除时，它就不能只使用'<ul class="title_here'>进行样式设置。 - Thomas

@ThomasTung：作为以后参考的建议，当提出问题时，尽可能减少问题中的代码量是明智的。也就是说，修剪掉任何不必要的部分。问题中的许多HTML和CSS对您的问题没有影响，因此包含它们只会使您的问题更加混乱。 - Chris

@Chris，抱歉！我不知道你们是否需要看整个代码，以确定我是否在某个地方做错了什么，导致它不能正常工作。 - Thomas

@Thomas：总是给予过多总比过少好，但调试的一个非常好的方法是去掉样式看看它们是否有影响。如果你把它拿出来并修复了问题，那么你就知道那是问题的一部分。如果没有影响，你可以相当确定它是无关紧要的。这并不总是万无一失的，但制作一个最小化版本的问题通常可以帮助自己找出原因，如果不能找到原因，也更容易让其他人看到你遇到的问题。 - Chris

3个回答

1

不确定您想要做什么，但您可以尝试类似于这样的方法。

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

您的标记语言可以是这样的：

<ul class="lastbit">
  <li></li>
  ...
</ul>

这将应用样式到您用该样式标记的 ul 的所有 li 元素。

- Mike J

0

要为所有列表设置样式，请使用：

ul{
    /* styles here */
}

要为列表中的所有项目设置样式，请使用

li{
    /* styles here */
}

要为列表中所有项目中的所有锚点设置样式，请使用

li a{
    /* styles here */
}

此外，提醒您一下，您的第一个 ul 具有类名 "navi"，列表中的项目也是如此。它只有一个 <li>，但您可能希望有 4 个（因为其中有 4 个链接）。

- DACrosby

感谢您提供的所有信息和帮助！ - Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

你应该更多地了解CSS中的选择器。简单来说，你正在做的是：

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

这段话的意思是，所有带有“social”类的元素都会应用给定的样式。

当每个

元素都有这个类时，它就按照您想要的方式应用。但是，当您将该类放在

。为了解决这个问题，您需要稍微更改选择器，以指定您希望在
上应用样式：
```
.social li {
    list-style: none;
    display: inline;
}
```
上述代码表示所有类名为 social 的元素的后代 li 元素都应该具有所需的样式，这正是您想要的。