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 回答
0

你应该给.underline类text-decorationcss 属性：

li.underline{
    text-decoration:underline
}

JSFIDDLE

于 2013-09-16T19:00:27.487 回答
0

我同意，黄教的回答。在 中添加 span 元素<li>并添加下划线将解决您的问题。这样，您可以在不影响列表本身的情况下为项目符号着色和设置样式。

于 2013-09-16T18:53:15.190 回答