Как создать навигационную панель сверху в html и css?

Question

[Yukan Mukimura]

Пожалуйста отправьте код html и css на самый минималистичный навбар который прилиплен к вверху и блоки с ссылкой заполнили всю ширину экрана и между ними была линия которая их отделяет. Я учу html css уже 3 месяца но навбар создать такой кошмар. Пожалуйста не критикуйте меня.

Comments

[MrColdCoffee]

покажите хотя бы как пытались

[Yukan Mukimura]

MrColdCoffee,

<nav>
   <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
   </ul>
</nav>

Выровнял все li флексом чтобы не мучаться с врапами и кривой позицией.
Центрировал все li и дал ul высоту 35px.
До этого я установил reset.css чтобы опять же не мучаться.
И в этом все закончилось , размер li не заполняет высоту и доступную ширину.

Я могу создать правильно навбар с логотипом кнопочкой меню и картинкой (это легче чем простой бессмысленный навбар о котором я говорю).

[Кирилл Никитин]

А посмотреть на любом сайте где есть нужный навбар как он сделан?

[Yukan Mukimura]

Кирилл Никитин, к сожалению я не нашел , многие используют последний сказанный мной навбар

[Ankhena]

Yukan Mukimura,
1. Чтобы не мучиться, reset.css лучше как раз таки удалить. И сбрасывать только то, что не нужно и только там, где нужно.
2. Обычно в верстке не задают высоту. Просто потому что мы не знаем сколько будет контента.
3. Выложите свой неудавшийся пример на codepen.io
А также скрин как должно быть.

Я учу html css уже 3 месяца но навбар создать такой кошмар.

Да, пожалуй, для такой штуки хватило и бы одного месяца или даже поменьше. Хотя, конечно, интенсивность обучения может быть разной.

[Yukan Mukimura]

Без ресета я скорее мучаюсь . Я завтра загружу на codepen

[Ankhena]

Yukan Mukimura, ну это просто потому что пока не понимаете что происходит. А его отключение как раз таки прояснит некоторые моменты. Но выбор качества дело ваше.

Answer 1

[nikalpet]

привет!
код в html, надеюсь тут ясно

nav class="nav">

a class="item" href="#about">About us /a>

a class="item" href="#why-us">Our services /a>

a class="item" href="#expertise">Our expertise /a>

a class="item" href="#prices">Prices /a>

a class="item" href="#address">Address /a>

/nav>

код в css, как то так, вместо flex-end можно что-нибудь другое, что нравится больше, цвет поменять и тп.

.nav {
display: flex;
justify-content: flex-end;
background-color: #1e313e;
padding: 10px;
}

.item {
color: #efd3a2;
padding: 20px;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}