導航欄沒有正確填充屏幕寬度

因此，我正在爲我的網站製作導航欄，但問題是，我似乎無法使其適合整個屏幕寬度。（注：仍然在酒吧工作，所以如果有任何無用的代碼，請盡你所能忽略它：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; 
}

來源

2012-07-31 Sidetracking

，我認爲你的一些HTML的缺失。否則，你有''沒有對應'

'... – KRyan 2012-07-31 16:06:55

試着做這樣的事情...

我想你的按鈕不上寬度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-31 16:16:28

非常感謝你的回答，你是一個巨大的幫助。我適應了一點，現在它已經非常有用了，只需要把它磨光！ – Sidetracking 2012-07-31 16:42:15

沒問題。很高興我能幫上忙。 – 2012-07-31 18:36:51

把個人< LI> </LI>標記之間的聯繫。要將元素展開爲屏幕寬度，請使用寬度：100％;.

來源

2012-07-31 16:10:52 Kwon

嘿謝謝你的回覆！無論如何，我做了你所說的，似乎正在取得進展，但是，只有聯繫人按鈕正在顯示。我會盡快更新代碼。 – Sidetracking 2012-07-31 16:17:36

您已聲明位置：固定爲鏈接。擺脫這一點，你只需要它的列表元素。（或者所以我猜） – daveyfaherty 2012-07-31 16:24:47

不知道你想要的鏈接擴展到頁面的長度或不，但這裏有一個簡單的例子。 http://jsfiddle.net/LHRZA/4/ – Kwon 2012-07-31 16:37:11

導航欄沒有正確填充屏幕寬度

回答

相關問題