Question

我正在学习如何使用html和css进行标记并且一直在进行实验，并且遇到一些问题让我感到头疼。

我使用文本作为占位符徽标而不是img，但由于某种原因，它会将列表从导航栏中移除并将其推送到下方。但是，当我删除徽标时，列表会移回导航栏。

但是！我已经尝试使用内联块，浮动等更多关注已经提出的问题我可以找到但似乎没有解决我的问题。

以下是带有徽标的代码:(如果有任何不同，请在Notepad ++中制作）

<!DOCTYPE html>
    <html>
        <link href="css/styles.css" rel="stylesheet"/>

        <body>
            <nav class="nav">
                <div class="logo">
                Website
                </div>
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </body>
</html>

这是没有徽标的：

<!DOCTYPE html>
<html>
    <link href="css/styles.css" rel="stylesheet"/>

    <body>
        <nav class="nav">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>

编辑：我道歉，尝试在代码标签中格式化这一点很难实现。它将我的css和html合并为一个标签。

body, html {
    margin : 0px;
}

nav {
    width : 100%;
    background-color : #0099cc;
    height : 40px;
    font-size : 22px;
    font-family : Verdana;
    line-height : 40px; 
}

ul {
    list-style-type : none;
    margin : 0;
    padding : 0
}

nav , logo , ul {
    display : inline-block;
}

li{
    float : left;
    border-right : 1px solid black;
}

li a {
    display : block;
    padding : 0px 15px;

    color : white;

    text-align : center;
    text-decoration : none;
}
li a:hover {
    background-color : #007acc;
    color : white;
}

网站徽标取代了导航栏上的列表

0 个答案: