は、どのように私のナビゲーションバーを中心と私は中央にナビゲーションバーを入れしようとしてる側

Question

https://jsfiddle.net/qnw7a9zk/

上のソーシャルメディアのアイコンを入れて、そして側のソーシャルメディアのアイコンにします。私はこの問題に対する他の解決策を探し求めましたが、そのアイコンを側に置くことも望んでいません。

左にナビゲーションバーを、右にアイコンを浮かそうとすると、それは機能しますが、ナビゲーションバーは中央になく、ウィンドウのサイズを変更する場合（反応性）バーの種類の休憩。

アイコンは右には表示されますが、ナビゲーションバーと同じ行には表示されません。アイコンはその下に固定されています。

<div class="wrapper"> 
    <img class="logo" src="Logo.png" /> 
    <nav> 
    <ul class="nav"> 
     <li class="navlist"><a href="#">Properties</a></li> 
     <li class="navlist"><a href="#">The Team</a></li> 
     <li class="navlist"><a href="#">Contact Us</a></li> 
    </ul> 
    <div class="imgs"> 
     <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a> 
     <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a> 
     <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a> 
    </div> 
    </nav> 
</div> 
<footer> 
    <p class="buttons">Real estate</p> 
</footer> 
</body> 


body { 
    background-color: #ffffff; 
    margin: 0; 
    display: table; 
    height: 100%; 
    width: 100%; 
    background-image: url(nice.jpg); 
    background-size: 100% 100%; 
    overflow: auto; 
} 

.wrapper { 
    text-align: center; 
    padding: 0px; 
    height: auto; 
    width: 100%; 
} 

footer { 
    background-color: #cbb492; 
    display: table-row; 
    height: 2px; 
    text-align: center; 
} 

li a { 
    text-decoration: none; 
    font-variant: small-caps; 
    color: black; 
} 

li:hover { 
    background-color: #cbb492; 
} 

nav { 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    padding-bottom: 2px; 
    padding-top: 2px; 
    background-color: whitesmoke; 
} 

.logo { 
    height: 28px; 
    width: 90px; 
    padding-top: 50px; 
} 

p { 
    color: white; 
    font-size: 6px; 
    text-align: left; 
    padding-left: 20px; 
} 

.navlist { 
    display: inline; 
    padding-left: 30px; 
    margin-left: 10px; 
    margin-right: 10px; 
    padding-right: 30px; 
    padding-top: 3px; 
    padding-bottom: 2.4px; 
} 

.nav { 
    list-style: none; 
    padding: 0; 
    width: 100%; 
    margin: 0; 
    top: 0px; 
} 

.imgs { 
    list-style: none; 
    margin: 0; 
    display: block; 
    padding-left: 0px; 
    float: right; 
    width: 30%; 
} 

.imgs img { 
    width: 9%; 
    height: 9%; 
} 

Answer 1

あなたは.navにwidth:100%を与えているので、それは完全な幅を取り、画像を押し下げています。ナビゲーションと画像に幅の比率を維持します。同様80% navidationと20 %画像は、フィドル https://jsfiddle.net/qnw7a9zk/5/

Answer 2

を参照してくださいあなたは.imgs-divの1つの高いレベルを移動しようとする必要があります。それより簡単になるはずです。 1つのアプローチはフレックスボックスモデルです。したがって、ラッパーコンテナは取得します

display: flex; 
flex-direction: row; 
justify-content: space-between; 

もう少し編集しました。これはあなたが習得したかったものですか？ https://jsfiddle.net/qnw7a9zk/6/

Answer 3

あなたはdisplay: inline-block

body { 
 
    background-color: #ffffff; 
 
    margin: 0; 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(nice.jpg); 
 
    background-size: 100% 100%; 
 
    overflow: auto; 
 
} 
 

 
.wrapper { 
 
    text-align: center; 
 
    padding: 0px; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background-color: #cbb492; 
 
    display: table-row; 
 
    height: 2px; 
 
    text-align: center; 
 
} 
 

 
li a { 
 
    text-decoration: none; 
 
    font-variant: small-caps; 
 
    color: black; 
 
} 
 

 
li:hover { 
 
    background-color: #cbb492; 
 
} 
 

 
nav { 
 
    padding-bottom: 2px; 
 
    padding-top: 2px; 
 
    background-color: whitesmoke; 
 
    text-align: center 
 
} 
 

 
.logo { 
 
    height: 28px; 
 
    width: 90px; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-size: 6px; 
 
    text-align: left; 
 
    padding-left: 20px; 
 
} 
 

 
.navlist { 
 
    display: inline; 
 
    padding-left: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    padding-right: 30px; 
 
    padding-top: 3px; 
 
    padding-bottom: 2.4px; 
 
} 
 

 
.nav { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.imgs { 
 
    list-style: none; 
 
    margin: 0; 
 
    display: inline-block; 
 
    padding-left: 0; 
 
    
 
}

<div class="wrapper"> 
 
    
 
    <nav> 
 
    <ul class="nav"> 
 
     <li class="navlist"><a href="#">Properties</a></li> 
 
     <li class="navlist"><a href="#">The Team</a></li> 
 
     <li class="navlist"><a href="#">Contact Us</a></li> 
 
    </ul> 
 
    <div class="imgs"> 
 
     <a href="#" title="Twitter" alt=" Icon"><img src="Instagram.png" /></a> 
 
     <a href="#" title="Twitter" alt=" Icon"><img src="Facebook.png" /></a> 
 
     <a href="#" title="Twitter" alt=" Icon"><img src="Twitter.png" /></a> 
 
    </div> 
 
    </nav> 
 
    <img class="logo" src="Logo.png" /> 
 
</div> 
 
<footer> 
 
    <p class="buttons">Real estate</p> 
 
</footer> 
 
</body>

正しい答えだ