CSS - nav вне места

Question

Я внесла некоторые изменения, чтобы добавить дополнительную ссылку на мой навигатор, но она не была встроена, как показано ниже. «Кредит» был нажат на следующую строку. Я пытаюсь внести изменения в положение или отображение в css, но все равно ничего не происходит.

#nav { 
 
    list-style: none; 
 
} 
 
#nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 0; 
 
    display: none; 
 
} 
 
#nav li { 
 
    font-size: 24px; 
 
    float: left; 
 
    position: relative; 
 
    display: block; 
 
    width: 280px; 
 
    height: 50px; 
 
}

<nav id="navigation"> 
 
    <ul id="nav"> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li><a href="DisplayCD.php">Browse CD</a></li> 
 
    <li><a href="SearchCD.php"> Search</a></li> 
 
    <li><a href="OrderCDsForm.php"> Order</a></li> 
 
    <li><a href="Credit.php">Credit</a></li> 
 
    </ul> 
 
</nav>

Answer 1

Я думаю, что это из-за ширины. В вашем случае каждый элемент li представляет собой блок ширины 280px. 280 * 4 = 1120px - полная ширина элементов li, исключая «Credits».

Большинство пользователей теперь работают с браузером, установленным на 1024 x 768 или более. Однако, если это ниже, «Кредиты» перейдут к следующей строке. Так будет и с вами! Итак, попробуйте уменьшить общую ширину и всегда старайтесь держать ее не более 1000 или ниже.

Answer 2

Привет Я сделал несколько вещей здесь:

• Использования коробчатой ​​проклейки игнорировать любые отступы вокруг элементов, так что они всегда будут соответствовать
ширины
• Используйте 20% теперь у вас есть 5 пунктов в вашем нав список вместо 4 (25%)
• Используйте поле: 0 и отступы: 0 на Li поэтому они не добавляют дополнительное пространство

* { 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
#nav 
 
{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav li 
 
{ 
 
    font-size: 24px; 
 
    width: 20%; 
 
    float: left; 
 
    margin:0; 
 
    padding: 0; 
 
}

<nav id="navigation"> 
 
       <ul id="nav"> 
 
        <li><a href="index.php">Home</a></li> 
 
        <li><a href="DisplayCD.php">Browse&nbsp;CD</a></li> 
 
        <li><a href="SearchCD.php">Search</a></li> 
 
        <li><a href="OrderCDsForm.php">Order</a></li> 
 
        <li><a href="Credit.php">Credit</a></li> 
 
       </ul> 
 
      </nav>

Answer 3

Большинство ответов предполагают изменение ширины li тегов и этажерок, в то время как это будет работать на некоторое время все еще будет точка, в которой li s либо перекрытие или вытесняются на новую строку. Я предлагаю добавить media query и изменить стиль, когда экран пользователя слишком мал:

#nav { 
 
    list-style: none; 
 
    display:flex; /*New: allows us to use flex:1;*/ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav li { 
 
    font-size: 24px; /*NB: Try using a different unit: pt, em, rem, etc...*/ 
 
    flex:1; /*All items are the same size*/ 
 
    height: 50px; 
 
} 
 
@media (max-width: 700px) { 
 
    #nav{display:initial;} 
 
}

<nav id="navigation"> 
 
    <ul id="nav"> 
 
    <li><a href="index.php">Home</a></li> 
 
    <li><a href="DisplayCD.php">Browse CD</a></li> 
 
    <li><a href="SearchCD.php"> Search</a></li> 
 
    <li><a href="OrderCDsForm.php"> Order</a></li> 
 
    <li><a href="Credit.php">Credit</a></li> 
 
    </ul> 
 
</nav>