Проблемы с шириной на navbar

Im новое для веб-дизайна, поэтому я начал очень простой проект. Я попытался сделать навигационную панель с четырьмя кнопками, равномерно распределенными. Однако, когда я устанавливаю ширину до 25% для li, последний элемент панели не помещается на странице, а вместо этого переходит под другие. Я хочу, чтобы все они были равномерно распределены.Проблемы с шириной на navbar

<!DOCTYPE html PUBLIC> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" href="./css/style.css"> 
    <title>Untitled Document</title> 
</head> 

<!-- Nav Bar --> 
<div id="#nav"> 
    <ul> 
     <li><a class="red" href="#nav">Home</a> 
     <li><a class="orange" href="#OverOns">Over ons</a> 
     <li><a class="yellow" href="#Nieuws">Nieuws</a> 
     <li><a class="green" href="#Contact">Contact</a> 
    </ul> 
</div> 
<!-- End Nav Bar --> 

<!-- Slider --> 
<div class="slider"> 
</div> 
<!-- End Slider --> 

<body> 
</body> 
</html> 


@charset "utf-8"; 
/* CSS Document */ 

/* Fix padding and marg options in different browsers */ 
* { 
    margin:0; 
    padding:0; 
} 

.red { 
    background-color:#F00; 
} 

.orange { 
    background-color:#F90; 
} 

.yellow { 
    background-color:#FF0; 
} 

.green { 
    background-color:#0F0; 
} 

.slider { 

} 

ul { 
    position:fixed; 
    top:0px; 
    margin:0; 
    width:100%; 
    list-style-type:none; 
    border:0; 
    padding:0; 
    overflow:hidden; 
    background-color:#FF; 
} 

li { 
    float: left; 
    width:25%; 
    border-right:1px solid #000; 
} 

li:last-child { 
    border-right:none; 
} 

li a { 
    display: block; 
    padding: 18%; 
    color:#FFF; 
    text-align:center; 
    text-decoration:none; 
} 

li a:hover { 
    opacity:0.5;  
}

источник

2016-01-19 Bobray

Это, как правило, потому что, когда элементы отображаются в виде inline-block, пространство между элементами отображается в виде текста. Чтобы исправить это, установите размер шрифта на родительском объекте равным 0, а затем сбросьте размер шрифта на дочернем элементе. Размер шрифта по умолчанию для большинства браузеров - 16px.

Кроме того, границы обычно добавляются к ширине элемента вместо того, чтобы быть включенным в него. У вас есть широкая рамка 1px, поэтому это 25% + 2px (одна для обеих сторон). Используйте box-sizing: border-box, чтобы включить ширину рамки в размер элемента.

Вот простой пример.

dl { 
 
    font-size: 0; 
 
} 
 
dd { 
 
    font-size: 16px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    width: 25%; 
 
    text-align: center; 
 
} 
 
a { 
 
    display: inline-block; 
 
    padding: 7.5px 20px; 
 
    border: 1px solid #f9fd42; 
 
    border-radius: 5px; 
 
    color: #000; 
 
    text-decoration: none; 
 
}

<dl> 
 
    <dd><a href="#">Item</a></dd> 
 
    <dd><a href="#">Item</a></dd> 
 
    <dd><a href="#">Item</a></dd> 
 
    <dd><a href="#">Item</a></dd> 
 
</dl>

источник

2016-01-19 17:17:06

. Спасибо за комментарий, я добавил размер шрифта от 0 до ul и размер шрифта 16 в ли и встроенный блок, но ничего не изменилось? – Bobray

Я заметил, что вы используете float вместо встроенного блока, я бы не рекомендовал это, поскольку это неправильное использование float. В любом случае, вторая часть текста моего ответа решит это для вас. Границы добавляют к ширине элемента вместо того, чтобы быть включенным в ширину. Используйте «box-sizing: border-box» для включения границы по ширине. –

Спасибо, что исправил это! – Bobray

-1

Обычно это происходит, когда у вас есть какая-то прокладка/граница/граница между элементами. Самый простой способ решить эту проблему - уменьшить вашу ширину с 25%. Убедитесь, что общая ширина не превышает 100%. Прямо сейчас, поэтому ваши элементы идут ниже.

То, что вы пытаетесь достичь, сделало бы элементы с абсолютно свободным пространством между ними. Используйте что-то около 96%. Это составляет 24% для каждого ли.

Альтернативное решение:

Установите это свойство -> коробка-проклейки: границы окна; , а затем установите ширину 25%. Это должно решить. То, что вы в основном пытаетесь сделать, это сделать ширину элемента + padding + border + margin = 25%

Сделайте это, используя класс ширины и воздержитесь от использования встроенного стиля.

Добро пожаловать на веб-программирование

источник

2016-01-19 17:14:39

Спасибо за ответ, я уже пытался установить его до 24%, но затем он оставляет с правой стороны. Я хочу, чтобы он охватывал всю ширину страницы, возможно ли это – Bobray

-1

Вы имеете границу 1px в ли, так что эта граница взять пространство других элементов, другими словами, размер Ли 25% плюс 1 точек границы ,

Проверьте свой CSS. Это твой код.

li { 
    float: left; 
    width:25%; 
    border-right:1px solid #000; 
}

Попробуйте это.

li { 
    float: left; 
    width:25%; 
    border-right:0; 
}

источник

2016-01-19 17:25:05

Спасибо, это была проблема – Bobray

-1

Это потому, что у вас есть граница-право, то есть каждый блок имеет Li общую ширину 25% + 1px и последний не может поместиться.

Так как вы, вероятно, хотите, чтобы сохранить эту границу и иметь четыре кнопки, охватывающих все пространство вы можете сделать что-то вроде этого:

li { 
    float: left; 
    width: calc(25% - 1px); 
    border-right:1px solid #000; 
}

таким образом вы снимаете, что 1px это вызывает проблему.К сожалению, известково() не поддерживаются некоторыми старых браузеры: calc() caniuse.com

Надеется, что это может помочь вам; D

источник

2016-01-19 17:26:25 Abhrogash

Проблемы с шириной на navbar

ответ

Смежные вопросы