Html 如何使无序列表中的项目符号不带下划线_Html_Css

Html 如何使无序列表中的项目符号不带下划线

html css

Html 如何使无序列表中的项目符号不带下划线,html,css,Html,Css,所以我只是在我的网络编程1课上学习CSS，这个练习教给我们关于类选择器的知识，所以我们的老师希望我们制作一个页面，它有一个无序的列表，只有一些列出的项目需要加下划线。然而，当我这样做时，列表中的项目符号也会加下划线，而在他希望我们制作的页面中，它们并没有加下划线我在下面包含了我的代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title

所以我只是在我的网络编程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>


无标题文件
.underline{文本装饰：underline}
固体

四面体
五面体
多维数据集
七面体
八面体
十二面体
二十面体

带下划线的项目有什么特别之处。

我同意黄教的回答。在

中添加span元素并使其带下划线将解决问题。通过这种方式，您可以在不影响列表本身的情况下为项目符号添加颜色和样式。

您应该提供

.underline

类

文本装饰

css属性：

li.underline{
    text-decoration:underline
}

您的代码很好，一定是浏览器出现了故障。实际上，让浏览器显示带下划线的项目符号并不是那么容易。必须是这样的：

/* 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";
        }

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

在评论中，@Huangism提出了最佳解决方案。标记如下所示：

/* 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";
        }

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

四面体

不过，这是一个奇怪的小故障。我使用您的标记测试的浏览器中没有显示错误的项目符号。

项目符号没有为我加下划线。。我用的是Chrome，你用的是什么浏览器？编辑这些项目符号在Chrome、FF、IE或Safari中没有下划线。。（刚测试过的cource..的当前版本）在li中创建一个包装器元素（div或span），并为其指定类underline，从li中删除underline。在mac上最新的firefox中，我也没有看到项目符号的下线。通常列表中的点不带下划线，但可能一些较旧的浏览器会这样做。您的代码非常好，特别是对于初学者。它对我来说很好，所有的外观都井然有序。向我们展示你的HTML和CSS（和JavaScript）的动作，使用，或类似的东西。这样你就可以展示它是如何工作的，而不仅仅是加分（这应该在你的问题中）。出于好奇：您是否指定了

列表样式位置：外部在你的ul，li
属性中？[offtopic]它们是特殊的，因为它们是柏拉图式的。