Question

无法将此列表集中......（元素，li）。

有什么问题？

我现在差不多半小时看这段代码，还是找不到有什么问题。一直在改变一些事情，但仍然是错误的。

HTML：

<!DOCTYPE html>
<html lang="pl">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title>Blog</title>
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<header>
    <div id="logo"></div>
    <h1 class="hidden">Devloger</h1>
    <nav>
        <div class="nav">
            <ul>
                <li>
                    Strona Główna
                </li>
                <li>
                    Spis Treści
                </li>
                <li>
                    Kategorie
                </li>
                <li>
                    Współpraca
                </li>
                <li>
                    Kontakt
                </li>
            </ul>
        </div>
    </nav>
</header>


</body>
</html>

CSS：

    body {
    margin: 0;
    background-image: url("2.png");
    background-repeat: repeat-x;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}
#logo {
    background-image: url("logo.png");
    width: 527px;
    height: 58px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
}
.hidden {
    display: none;
}
.nav {
    background-color: #55585d;
    height: 36px;
    margin-top: 10px;
    border-bottom: 2px solid #44474c;
    border-top: 2px solid #44474c;
    text-align: center;
}
.nav > ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.nav > ul li {
    text-align: center;
    float: left;
    padding: 5px;
}

Answer 1

当您浮动元素时，您将很难将它们居中。 float的元素向左浮动或向右浮动。

将.nav > ul li设置为display: inline-block而不是float: left，然后将.nav > ul改为margin: 0 auto：

body {
    margin: 0;
    font-size: 17px;
}
#logo {
    width: 527px;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
}
.nav {
    background-color: #55585d;
    height: 36px;
    margin-top: 10px;
    border-bottom: 2px solid #44474c;
    border-top: 2px solid #44474c;
    text-align: center;
    width: 100%;
}
.nav > ul {
    list-style: none;
    margin: 0 auto; /* changed */
    padding: 0px;
}
.nav > ul li {
    text-align: center;
    display: inline-block; /* changed */
    padding: 5px;
}

<nav>
    <div class="nav">
        <ul>
            <li>
                Strona Główna
            </li>
            <li>
                Spis Treści
            </li>
            <li>
                Kategorie
            </li>
            <li>
                Współpraca
            </li>
            <li>
                Kontakt
            </li>
        </ul>
    </div>
</nav>

Answer 2

之所以发生这种情况，是因为你向左边的li标签浮动，删除它并在ul上添加了使用flexbox，设置了所需的宽度，在这种情况下，我把100％和justify-content：center;所以它可以居中。

＆＃13;

    body {
    margin: 0;
    background-image: url("2.png");
    background-repeat: repeat-x;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}
#logo {
    background-image: url("logo.png");
    width: 527px;
    height: 58px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
}
.hidden {
    display: none;
}
.nav {
    background-color: #55585d;
    height: 36px;
    margin-top: 10px;
    border-bottom: 2px solid #44474c;
    border-top: 2px solid #44474c;
    text-align: center;
}
.nav > ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display:flex;
    justify-content:center;
    width:100%;
}
.nav > ul li {
    text-align: center;
    
    padding: 5px;
}

＆＃13;

<header>
    <div id="logo"></div>
    <h1 class="hidden">Devloger</h1>
    <nav>
        <div class="nav">
            <ul>
                <li>
                    Strona Główna
                </li>
                <li>
                    Spis Treści
                </li>
                <li>
                    Kategorie
                </li>
                <li>
                    Współpraca
                </li>
                <li>
                    Kontakt
                </li>
            </ul>
        </div>
    </nav>
</header>

＆＃13;

Answer 3

将您的css仅interrupted()改为float:left因为左手压缩（浮动）您的文字左侧

display:inline-block

}

休息很好

为什么这个无序列表不在中心？怎么了？

3 个答案: