1

Web プログラミング 1 のクラスで CSS を学んでいて、演習ではクラス セレクターについて教えているので、先生は、リストされたアイテムの一部だけに下線を引いた、順序付けられていないリストを持つページを作成するように求めています。ただし、これを行うと、リスト内の箇条書きにも下線が引かれますが、彼が私たちに作成してほしいページとは異なり、下線は引かれません。

以下にコードを含めました

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style>
            .underline { text-decoration: underline}
        </style>
    </head>
    <body>
        <h1> Solids </h1>
        <ul>
            <li class= "underline"> Tetrahedron </li>
            <li> Pentahedron </li>
            <li class = "underline"> Cube </li>
            <li> Heptahedron </li>
            <li class= "underline"> Octahedron </li>
            <li class = "underline"> Dodecahedron </li>
            <li class = "underline"> Icosahedron </li>
        </ul>
        <p> What's special about the underlined items.
    </body>
</html>
4

3 に答える 3

0

あなたのコードは問題ありません。ブラウザの不具合に違いありません。実際、ブラウザーに下線付きの箇条書きを表示させるのはそれほど簡単ではありません。次のようにする必要があります。

/* this will display underlined bullets. It can also be done in the markup without the second rule and adding an &bull; in between the tags */
 li.underline { 
            text-decoration: underline;
            list-style: none; 
        }

     li.underline:before {
            content: "\2022";
        }

最良の解決策は、コメントで @Huangism によって提案されました。マークアップは次のようになります。

<li><span class= "underline"> Tetrahedron </span></li>
<!-- and so on... -->

それでも、それは奇妙なグリッチです。あなたのマークアップでテストしたブラウザーでは、箇条書きが正しく表示されません。

于 2013-09-16T19:18:33.923 に答える