この順序付けられていないリストの中央に表示されないのはなぜですか？なにが問題ですか？

このリストを中心にすることはできません...（elements、li）。この順序付けられていないリストの中央に表示されないのはなぜですか？なにが問題ですか？

どうしたのですか？

私はこのコードを30分ほど前に見ていますが、まだ間違っているものは見つけられません。常に何か変わっていて、間違っています。

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; 
}

出典

2017-05-16 Adrianno Barello

その後、あなたがそれらを中心に苦労しています。 floatの要素は、左に浮動小数点または右に浮動小数点のいずれかです。

ではなく.nav > ulmargin: 0 autoあなた.nav > ul li代わりfloat: leftのdisplay: inline-blockに設定し、与える：

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>

出典

2017-05-16 19:07:14 TylerH

"要素を浮動させると、y彼らを中心に苦労するだろう」どうすればフロートを維持したままでこれをセンターに置くことができますか？？（苦労して）これを達成するには？ –

@AdriannoBarelloコンテナ内の要素を浮動させ、コンテナを中央に配置することができます。しかし実際には 'float'はそれらの' li'要素を一行に入れる正しい方法ではありません。 – TylerH

あなたは左のliタグに浮いているので起こっ

、それを削除し、 ulにuse flexboxを追加し、この場合は希望の幅を設定し、100％とjustify-content：center;それは中心に置くことができます。

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; 
 
}

<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>

出典

2017-05-16 19:08:34

-2

変更あなたのCSSのみfloat:leftdisplay:inline-blockだってフロートが

.nav > ul li { 
text-align: center; 
display: inline-block; 
padding: 5px;

}

残りは良いですが左に（フローティング）テキストを絞る左へ

出典

2017-05-16 19:31:00

この順序付けられていないリストの中央に表示されないのはなぜですか？なにが問題ですか？

答えて

関連する問題