新线上的链接

Question

新线上的链接

我有以下内容:

HTML

  <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Result</title>
        </head>
        <body>
        <div>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            <a href= https://google.com>Google</a>
            </div>
        </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

CSS

    a:hover{
        text-decoration: none
    }
    a:first-child{
        color: #CDBE70
    }
    a:nth-child(3){
        color: #FFC125
}

Run Code Online (Sandbox Code Playgroud)

我刚开始学习HTML,我遇到了问题.我上面的内容显示3个谷歌链接,但它们都在同一条线上.我希望每个链接都在新的一行.我尝试使用<p>并在CSS代码中将所有的a改为p,但它没有做任何事情.

Answer 1

Con*_*roß 6

如果链接在语义上是一个列表,您也应该在标记中重现它:

<ul>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
    <li><a href="https://google.com">Google</a></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

如果您不希望在链接前面放置项目符号,可以使用CSS list-style-type: none;在s ul或lis 上删除它们.

归档时间：	10 年，4 月前
查看次数：	12998 次
最近记录：	7 年，4 月前