调整导航宽度？

我正在关注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

调整导航宽度？

回答

相关问题