調整導航寬度？

我正在關注w3c school for CSS的教程，導航欄會自動變爲全寬而不讓我調整它。我想使用這些相同的代碼（我理解他們）我如何調整寬度？調整導航寬度？

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2016-01-24 BlueHorse

該ul默認爲display:block。默認爲width: 100%。

要覆蓋這個，只需放入任何CSS寬度（這將覆蓋默認的CSS）。您可以輸入任何有效的CSS length value。

或者，爲了使其不是全部寬度（但只是必要的長度），將display: inline-block添加到ul。

來源

2016-01-24 03:03:12

不僅我得到的答案，但有一定的瞭解！精湛<3 – BlueHorse

@BlueHorse我很高興我的幫助！ –

簡單地說：

添加width: n;

你UL選擇在CSS

Fiddle

編輯

在代碼中的n將是一個數字，後面是單位。所以，如果你想要550像素寬，n = 550px - 如小提琴中所示。

來源

2016-01-24 03:02:43

，缺省寬度爲100％，因此給予像寬度值覆蓋它：700像素或寬度：80％將寬度改爲700像素或80％

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     width: 700px; 
    }

來源

2016-01-24 04:46:33 Dinesh

調整導航寬度？

回答

相關問題