2

我两天前才开始使用 HTML/CSS。请放轻松。我目前正在建立一个网站。出于某种原因，我无法让 HTML 类/ID 用 CSS 呈现。为了使它起作用，我必须为每个列表创建一个类。我怎样才能使 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;
}
4

3 回答 3

1

不完全确定您要做什么，但您可能会尝试这样的事情。

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

您的标记可以是：

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

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

于 2013-06-21T15:05:29.470 回答
1

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

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

是说该类social的所有内容都应用了给定的样式。

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

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

上面说，作为具有类的项目的后代的所有 li 元素都social应该具有您想要的样式。

于 2013-06-21T15:12:07.377 回答
0

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

ul{
    /* styles here */
}

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

li{
    /* styles here */
}

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

li a{
    /* styles here */
}

另外，请注意，您的第一个ul具有类名“navi”，列表中的项目也是如此。它也只有一个<li>，尽管您可能想要 4 个（因为其中有 4 个链接）。

于 2013-06-21T15:12:19.810 回答