Question

我正在学习html＆amp; css和几个教程后，我决定从零开始编写网页。但我有一个问题。当我在CSS .nav 中添加“display：inline”时，它会忽略所有。 nav css属性，包括“display：inline “

这是代码：

HTML

<!DOCTYPE html>
<html>

    <head>
        <link href="main.css" rel="stylesheet">
        <title>Neni okurka, nebudou caciky</title>
    </head>

    <body>

        <div class="nav">
            <ul>
                <li class="active"><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
                <li><a href="#">Navigation 5</a></li>
            </ul>
        </div>

        <div class="nav2">
            <ul>
                <li class="active"><a href="#">Navi 1</a></li>
                <li><a href="#">Navi 2</a></li>
                <li><a href="#">Navi 3</a></li>
                <li><a href="#">Navi 4</a></li>
                <li><a href="#">Navi 5</a></li>
            </ul>
        </div>

    </body>

</html>

CSS

body {
    background-image: url("background.png");
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border: 25px solid rgba(0, 0, 0, 0.3);
}

.nav {
    display: inline;
    width: 500px;
    background: #fff;
}

Answer 1

正确的用法是：

.nav li {
    display: inline;
}

Answer 2

如果您需要background(image)，只要您提供container和width，就需要height，因为body是 “基础”，您可以margin: 0; padding: 0;仅重置它，然后您可以将<{1}}添加到但不是 background和{{1} }。在您创建的height内，您可以根据需要使用width和container。

height

width

此代码没有html, body { margin: 0; padding: 0; background-color: cadetblue; } .container { width: 1050px; height: 100vh; margin: 0 auto; position: relative; background-size: 100% 100%; background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center; } .nav { width: 1000px; height: 50px; margin: 0 auto; background: beige; border: 25px solid rgba(0, 0, 0, 0.3); } .nav ul { margin: 0; padding: 0; list-style-type: none; } .nav ul li { margin-left: 12px; } .nav ul li a { float: left; font-size: 16px; font-weight: lighter; text-decoration: none; font-family: sans-serif; margin: 10px 0px 10px 0px; padding: 8px 15px 8px 15px; } .nav ul li a:hover { color: #fff; border-radius: 3px; background: cadetblue; }或<div class="container"> <div class="wrapper"> <div class="nav"> <ul> <li class="active"><a href="#">Navigation 1</a> </li> <li><a href="#">Navigation 2</a> </li> <li><a href="#">Navigation 3</a> </li> <li><a href="#">Navigation 4</a> </li> <li><a href="#">Navigation 5</a> </li> </ul> <ul> <li class="active"><a href="#">Navi 1</a> </li> <li><a href="#">Navi 2</a> </li> <li><a href="#">Navi 3</a> </li> <li><a href="#">Navi 4</a> </li> <li><a href="#">Navi 5</a> </li> </ul> </div> </div> </div> 它的工作方式，但它是另一种方式以良好的方式对齐nabbar兼容与所有浏览器一样。

我希望你喜欢它并帮助你，如果你有其他问题，请告诉我。

Answer 3

你应该把display：inline-block;

Answer 4

男人试着把.nav ul点亮来引用li但是我不会用那个让我现在告诉你一秒

.nav ul li`display:inline`

Answer 5

在其他地方展示你的导航东西你不要使用.nav ul li display:inline 我知道我说这是为了回答你的问题，但我将告诉你的这件事将会更好 .nav ul li float:left 这将使li中的项目向左浮动并且将与内联相同但是可以使用它而不是内联

CSS没有显示部分代码

5 个答案: