私は自分のバナーで働いていますが、私の人生にとって私のロゴとログインリンクの間に空きスペースを確保する方法を考え出すことはできません。今まで私が持っていたものを得た：imgur.com/a/2pfjI 私は近くにいるように感じるが、私はそれを解決することはできない!!ナビゲーションバーの間にスペースを作成するにはどうすればよいですか？
HERESにHTML：https://pastebin.com/Z1v3UdDB HERESに私のCSS：https://pastebin.com/SnjH8jZj
私はとほぼ同一平面には、ログインして私の左のロゴ、その横に二つのリンクや、その後のスペースを持っている/右端にサインアップしたいですページの端。このようなもの
ロゴ......リンク1 |リンク2 ..............ここにスペース......................ログイン/サインアップ
ありがとうございます前進！ あなたはより多くの情報
この例で学んでください。これは私がflexboxで私のヘッダーを設定する方法です。主な変更点：ボックスサイジングを使用する：ボーダーボックス、フレックスボックス、およびマージン：自動でフレキシブルアイテムの位置を制御します。
* {
box-sizing: border-box;
}
body {
background-color: #181926;
color: white;
margin-top: 5%;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: rgb(101, 172, 255);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
height: 70px;
padding: 0 20px;
background-color: white;
top: 0;
left: 0;
}
.nav {
margin: 0 auto 0 100px;
}
.nav ul {
display: flex;
list-style-type: none;
color: black;
}
.separator {
margin: 0 10px;;
}<body>
<div class="header">
<div class="logo">
<a href="index.php"><img src="imgs/logo.png"></a>
</div>
<div class="nav">
<ul>
<li><a href="browse.php">Browse</a></li>
<span class="separator">|</span>
<li><a href="create.php">Create</a></li>
</ul>
</div>
<div class="login">
<a href="login.php">Login</a>
</div>
</div>
</body>これはほぼ達成しようとしていることですが、私は遊びをしています。他のコメントからフレックスボックスが解決策のようですが、あなたの応答に感謝します！ –
あなたはそれを持っています、確かに.navマージンとおそらく他のセクションのパディングを混乱させます。ボックスサイズ：border-box;幅を追加したりオーバーフローを心配することなくパディングを追加することができます。 – StefanBob
<body>
<div class="header flex">
<a href="index.php"><img src="imgs/logo.png"></a>
<ul class="nav flex">
<li><a href="browse.php">Browse</a> | <a href="create.php">Create</a> </li>
<li><a href="login.php">Login</a></li>
</ul>
</div>
</body>
すべての余分なdiv要素は必要ないが必要な場合は、私に教えてください。
ディスプレイフレックスを.headerとulに追加しました。 display:flexを分かりやすくするために独自のクラスとして保存して、どこにhtmlで追加したかを確認できます。
ulの幅を100％にします。
justify-content: space-betweenをulに追加しました。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
は、これはおそらく、フレキシボックスについての詳細を学ぶための最良の出発点であるhttps://jsbin.com/cepopi/edit?html,css,output
これはありがとう、すべての応答はかなり似ていますので、これにいくつかの光を照らしてくれてありがとう！ –
心配はいりません。フレックスボックスに入るための便利なリンクを追加しました。注意の言葉で言えば、flexboxは素晴らしいですが、ie9以前ではうまくいきません。 –
その後、
<ul class="nav">
<li class="nav-item" id="logo">
<a class="nav navbar-nav navbar-left" href="index.php"><img src="imgs/logo.png"></a>
</li>
<li class="nav-item">
<a class="nav navbar-nav navbar-center" href="browse.php">Browse</a>
</li>
<li class="nav-item">
<a class="nav navbar-nav navbar-center" href="create.php">Create</a>
</li>
<li class="nav-item">
<a class="nav navbar-nav navbar-right" href="login.php">Login</a>
</li>
</ul>
を使用してみてください、あなたが
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
のようなあなたの頭の部分にブートストラップリンクすることができ、すべての最初にして、CSSで
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
お試しください..
あなたのコードで実例jsfiddleを作成してください。あなたの質問に正しいコードスニペットボタンを使用することができます – StefanBob
'float：left'または' float：right'を試みたことがありますか？ –
この質問は重複している可能性があり、[** MCVE **]（https://stackoverflow.com/help/mcve）は含まれていません。クロージャルールごとに：*デバッグヘルプを求める質問（「なぜこのコードは動作しませんか？」）には、目的の動作、特定の問題またはエラー、および質問自体に再現するのに必要な最短コードが含まれている必要があります。いろいろな理由。 – Santi