Question

所以我只是在我的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>

Answer 1

我同意黄教的回答。在<li>中添加span元素并使下划线将解决您的问题。通过这种方式，您可以对项目符号进行着色和设计，而不会影响列表本身。

Answer 2

您应该提供.underline类text-decoration css属性：

li.underline{
    text-decoration:underline
}

JSFIDDLE

Answer 3

您的代码很好，它必须是浏览器故障。实际上，要使浏览器显示带下划线的项目符号并不容易。它必须是这样的：

/* 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... -->

不过，这是一个奇怪的故障。没有使用您的标记测试的浏览器显示错误的子弹。

如何使我的无序列表中的项目符号没有加下划线

3 个答案: