Question

我正在关注w3c学校的CSS教程，导航自动全宽，不让我调整它。我想使用这些相同的代码（我明白了）我如何调整宽度？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

ul默认为display:block。默认为width: 100%。

要覆盖它，只需输入任何CSS宽度（这将覆盖默认的CSS）。您可以输入任何有效的CSS length value。

或者，要使其默认不是全宽（但只是必要的长度），请将display: inline-block添加到ul。

Answer 2

简单地说：

添加width: n;

到CSS中的ul选择器

Fiddle

修改

代码中的将是一个数字，后跟单位。所以，如果你想要它宽550像素，那么n = 550px - 如小提琴所示。

Answer 3

默认宽度为100％，因此通过给出宽度等值来覆盖它：700px或宽度：80％会将宽度更改为700px或80％

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

调整导航宽度？

3 个答案: