Верстка, CSS, HTML, SVG

Как сделать верхнее меню в HTML & CSS

У меня есть <li>Download</li> с ссылкой и мне нужно её на черной полосе в центре красиво оформить как это сделать ?
All Exx
All Exx
16
Есть прекрасный визуальный редактор - WYSIWYG Web Builder 17.
За 10 минут сделаешь!
TS
The Special One
65 887
Лучший ответ
Для начала, перемести весь тег .menu из раздела .logo в .head. Потому что это как минимум очень странная структура получается. А если учесть, что ты использовал flex, который я ранее советовал, это совсем неправильно получается. У тебя уже сам .head, это flex контейнер, так что там дело пары свойств.

При такой структуре....
И таким оформлением картинки...
 header .head {  

   display: flex;  

   justify-content: flex-start;  

   gap: 20px;  

   width: 100%;  

   height: 100px;  

   padding: 0 20px;  

   box-sizing: border-box;  

   background-color: #000;  

} 

  

header .head .logo {  

   width: 100px; 

   height: 100%;  

}  

 

header .logo img {  

   height: 100%;  

}
Меню будет выглядеть примерно так...
 header .head .menu ul { 

   display: flex;  

   gap: 20px;  

   height: 100%;  

} 

 

header .head .menu a { 

   display: flex; 

   justify-content: center;  

   align-items: center; 

   height: 100%; 

   padding: 0 20px; 

   background-color: #fff; 

}
Остается только адекватно украсить.

Если тебе нужно само меню выровнять по центру отдельно от логотипа, то придется отрезать его от флекса через position: absolute.
ИХ
Ирэк Хадиев
85 951
All Exx Вот теперь мне нужно ссылку Download переместить в центр и сделать её красивее убрав синее подчёркивание под ней и добавить border-raduis
All Exx А как добавить в центре блок с белым фоном в котором будет текст ? А еще я добавил 2 тэга li, но теперь там какие то точки, если присмотреться!
All Exx и еще я увидел что при изменение ширины родителя логотип движется ? что делать
All Exx А как добавить в центре блок с белым фоном в котором будет текст ? А еще я добавил 2 тэга li, но теперь там какие то точки, если присмотреться!
Думаю, первым делом нужно добавить логики в разметку.
Сейчас у вас div с логотипом содержит внутри себя div с меню, это не имеет смысла.
Может быть смысл поставить их рядом.
А уже потом при помощи CSS разместить их в одной строчке.
Например, для div с логотипом задать конкретные размеры и float: left, чтобы блок меню обтекал логотип справа.

Но это я вслепую говорю. Для работающего решения нужно пробовать.
ВШ
Валера Шевченко
72 829

Похожие вопросы