2

2 日前に 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;
}
4

3 に答える 3

1

CSS のセレクターについて詳しく読む必要があります。一言で言えば、これで何をしているのか：

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

クラスのすべてにsocial、指定されたスタイルが適用されると言っています。

各要素にそのクラスがある場合li、必要に応じて適用されます。ただし、そのクラスを に配置すると、 ではなくulにスタイルが適用されます。これを修正するには、セレクターを少し変更して、li のスタイルが必要であることを指定する必要があります。ulli

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

上記は、クラスsocialを持つアイテムの子孫であるすべての li 要素が、必要なスタイルを持つ必要があることを示しています。

于 2013-06-21T15:12:07.377 に答える
1

何をしようとしているのか正確にはわかりませんが、次のようなことを試してみてください。

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

マークアップは次のようになります。

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

これにより、そのスタイルでマークした ul のすべての li 要素にスタイルが適用されます。

于 2013-06-21T15:05:29.470 に答える