0
html/css初心者はこちら。リスト項目を水平方向の並べ替えられていないリストの中央に配置するにはどうすればいいですか？
私はhtml/cssでいくつかのコースをやっていますが、今は私が好きないくつかのウェブサイトをコピーしようと試みて知識をテストしています。今、私はカーンアカデミーのトップページ（https://www.khanacademy.org）を作るために最善を尽くしているが、何かに苦労している。
私は、ページ上部のナビゲーションバーを表し<ul>を持って、そして今、私は「のページへ（リスト項目としてナビゲーションバーの内側にある<div id="ka">）自分のロゴを中央にしようとしているが、text-align: centerとmargin-left: auto; & margin-right: auto doesnのを使用しています何かをするようだ。私はthis questionを思えましたが、どのような示唆されたことは私のために動作しませんでした
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user/Sign up</li>
</ul>
</body>
</html>：
は、ここに私のコードです。
私の質問は次のとおりです。
私はかなりhtmlに新しいので、上のコードで多くの悪い習慣がある可能性があります。私がより効率的にやったことをするためのヒントは高く評価されます。
あなたのナビゲーションバーのUL持つ4つのliチャイルズをお楽しみください。それらのうちの1つを中心にしたいですか？あなたは心配していますか？どうやって他の子供たちを見せようとしているのですか？新しいユーザーと検索ボックスを右に、件名をロゴの左側に表示しますか？ ulの子供を均等に分配することを意味しないのですか？ – Taxellool