0

それで、私は自分のウェブサイトのナビゲーションバーを作成していますが、問題は、画面幅全体に収まるようにできないことです。(注: バーはまだ作業中なので、役に立たないコードがある場合は、できるだけ無視してください:P)

自動幅 (左パディング) を実行すると、画面のごく一部しか表示されませんが、幅を 100% にすると、実際のボタンは表示されません。さまざまな画面サイズで台無しになるため、pxまたはemを実行できます。

どんな助けでも素晴らしいでしょう、ありがとう！

HTML- `

<ul class="menu">  
<li class="menu"><a href="/wordpress/">Home</a></li>
<li><a href="/wordpress/">About</a></li>
<li><a href="/wordpress/">Blog</a></li>
<li><a href="/wordpress/">Services</a></li>
<li><a href="/wordpress/">Portfolio</a> </li>
<li><a href="/wordpress/">Contacts</a></li>

CSS-

                 ul.menu a {  
    display: inline-block;  
    padding: 0 30px;
    border-left: 0px solid rgba(255,255,255,0.1);  
    border-right: 0px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 50px;  
    background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);

    -webkit-transition-property: c0c0c0;  
    -webkit-transition-duration: 300ms;  
    -moz-transition-property: c0c0c0;  
    -moz-transition-duration: 300ms;
    margin-top: -8.3em;
    position: fixed;
    }   

}  

ul {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width: 100%;


}  

ul.menu {  
    height: 30px;  
    border-left: 0px solid ;  
    border-right: 0px solid ;
    float:left; 


    padding:0;
}  

ul.menu li {  
    display:inline-block;
    list-style: none;
    float:left;  
    height: 30px;  
    text-align: center;  

    }  



ul li a:hover {  
    background: #000000;  
}
4

2 に答える 2

0

このようなことをしてみてください...

ボタンが幅100％で表示されない理由は、<li>ブロックまたはインラインブロックとして表示する必要があり、マークアップが正しくないためだと思います。

.menu {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width:100%;
}

.menu li {
    display:inline-block;
    float:left;
}

そして、クォンが言ったように..あなたのHTMLはこのようになるはずです...

<ul class="menu">  
    <li><a href="/wordpress/">Home</a></li>
    <li><a href="/wordpress/">About</a></li>
    <li><a href="/wordpress/">Blog</a></li>
    <li><a href="/wordpress/">Services</a></li>
    <li><a href="/wordpress/">Portfolio</a> </li>
    <li><a href="/wordpress/">Contacts</a></li>
</ul>
于 2012-07-31T16:16:28.247 に答える
0

個々の < li >< /li > タグの間にリンクを配置します。要素を画面幅に拡張するには、width: 100%; を使用します。

于 2012-07-31T16:10:52.563 に答える