2017-10-14 4 views
0

私はブラウザの全幅に伸ばしたいナビゲーションバーを持っています。このdivの上端、右の&の左側だけを伸ばすことができるので、ブラウザの側面に触れることができますか? はここに今の私のコードです: HTML:CSSのdivの個々の辺を伸ばすことはできますか?

<div class="navigation"> 
<ul> 
    <a href="index.html"><li>Home</a></li> 
    <a href="about.html"><li>About</a></li> 
    <a href="contact.html"><li>Contact</a></li> 
</ul> 

CSS:私は背景-sizeプロパティを試してみましたが、100%に設定しますが、「それは効果がありませんプラス私ができるしている

.navigation ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #B4ABAB; 
    width: 100%; 
    box-shadow: 3px 3px 2.5px grey; 
} 
.navigation li { 
    float: left; 
} 
.navigation li a { 
    display: block; 
    color: #000; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 25px; 
} 

それを使って個々の側を編集する。私もverticle-alignを試しました。しかし、それはどちらも機能していません。何かアドバイス?ありがとう!

+0

あなたは絵やあなたが探しているもののいくつかの視覚的な例を含めていただけますか? – mrtig

答えて

1

は、お使いのブラウザは(とすべきである)中和することができる内部様式化されています。

https://jsfiddle.net/Lphggzf6/

+0

ありがとうございました!私は笑っていても驚いた – Zach

0
.navigator { 
    position : fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

おそらく、ナビゲータは固定されたスクロール可能なコンテンツを保持する必要があります。あなたはデフォルトでは0です

body, 
html { 
    margin: 0; 
} 

のマージンをしたいことを反映するためにhtmlと体のタグを設定する必要が

関連する問題