余白をCSSでインライン要素で個別に処理するにはどうすればよいですか？

私は自分のウェブサイトのナビゲーションバーに取り組んでおり、すべてをバーに均等に配置しようとしていますが、なんらかの理由で均等に動かすことができません。マージンはうまくいかないか、あるいはすべてではありませんが、かなりイライラしています。ここに私のコードは次のとおりです。余白をCSSでインライン要素で個別に処理するにはどうすればよいですか？

body { 
 
    margin: 0 px; 
 
    font - family: Helvetica; 
 
} 
 
.navbar { 
 
    background - color: grey; 
 
    width: 100 % ; 
 
    height: 70 px; 
 
    text - align: center; 
 
} 
 
.items li { 
 
    display: inline - block; 
 
    padding - left: 50 px; 
 
} 
 
.items a { 
 
    text - decoration: none; 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    padding-top: -25px; 
 
    }

<body> 
 
    <div class="navbar"> 
 
    <div class="items"> 
 
     <img src="logo1.png" style="height:55px;padding-top:7.5px;"> 
 
     <li><a href="apparel.html">Apparel</a></li> 
 
     <li><a href="ea.html">Equipment & Accessories</a></li> 
 
     <li><a href="contact.html">Contact Us</a></li> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-08-09 adexder

"'パディングトップ：-25px; '" パディングは、負の値（複数可）を取ることはありません。 –

liアイテムはulまたはolを親として持つ必要があります – Gerard

あなたのスニペットでは、jsセクションにCSSコードを設定します –

vertical-align:middle;を使用し、縦にロゴとリンクを中央に。

また、あなたはマージンやパディングを設定した場合、それはinlineプロパティを持つアイテムですので、<a>に設定しますが、インラインブロックされているliアイテムの上に置かないでください。

さらに、liの商品をulコンテナなしで書くのは奇妙です。

body { 
 
    margin: 0px; 
 
    font-family: Helvetica; 
 
} 
 
.navbar { 
 
    background-color: grey; 
 
    width: 100% ; 
 
    height: 70px; 
 
    text-align: center; 
 
} 
 

 
.items img 
 
{ 
 
vertical-align:middle; 
 
} 
 

 
.items li { 
 
    display: inline-block; 
 
    vertical-align:middle; 
 
    padding-left: 50px; 
 
} 
 
.items a { 
 
    text-decoration: none; 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    }

<body> 
 
    <div class="navbar"> 
 
    <div class="items"> 
 
     <img src="logo1.png" style="height:55px;padding-top:7.5px;"> 
 
     <li><a href="apparel.html">Apparel</a></li> 
 
     <li><a href="ea.html">Equipment & Accessories</a></li> 
 
     <li><a href="contact.html">Contact Us</a></li> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-08-09 08:03:45

注：フルページでそれを参照してください！

body { 
 
    margin: 0px; 
 
    font-family: Helvetica; 
 
} 
 
.navbar { 
 
background-color: grey; 
 
width: 100%; 
 
height: 70px; 
 
text-align: center; 
 
position: relative; 
 
} 
 

 
.items { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
} 
 
.items li { 
 
display: inline-block; 
 
padding-left: 50px; 
 
} 
 
.items a { 
 
text-decoration: none; 
 
color: #333; 
 
font-weight: bold; 
 
font-size: 20px; 
 
display: block; 
 
}

<div class="navbar"> 
 
<div class="items"> 
 
    <img src="logo1.png" style="height:55px;padding-top:7.5px;"> 
 
    <li><a href="apparel.html">Apparel</a></li> 
 
    <li><a href="ea.html">Equipment & Accessories</a></li> 
 
    <li><a href="contact.html">Contact Us</a></li> 
 
</div> 
 
</div>

出典

2017-08-09 07:54:53 Ehsan

余白をCSSでインライン要素で個別に処理するにはどうすればよいですか？

答えて

関連する問題