Question

我是非常新的，正在练习复制一些网站，并坚持创建标题。作为一个ul他们坐在内联但当我添加另一个ul他们堆叠内联。最后id向左浮动并将一个类设置为一个以使另一个向右浮动，但此时它们最终不在同一条线上。

<html>

<head>
    <title>html</title>

    <link rel="stylesheet" type="text/css" href="try.css">
</head>
    <body>

        <header>
            <nav>
                <ul>
                    <li><a href="">One</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                </ul>
                <ul>
                    <li><a href="">Four</a></li>
                    <li><a href="">Five</a></li>
                    <li><a href="">Six</a></li>
                    <li><a href="">Seven</a></li>
                </ul>
            </nav>
        </header>

    </body>

</html>

CSS

* {
margin: 0;
padding: 0;
}

header nav ul li {
display: inline;
}

Answer 1

这是因为ul是block元素。这意味着它将占据文档宽度的100％。

您必须将其默认行为更改为display: inline才能使其正常运行。

或更好的方法是只使用一个ul，其中包含所有li元素。

First solution

header nav ul { 
  display: inline;
}

Second solution

<body>

    <header>
        <nav>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
                <li><a href="">Six</a></li>
                <li><a href="">Seven</a></li>
            </ul>
        </nav>
    </header>

</body>

使用css

1 个答案: