0

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

#menu{
    height: 100px;
    position: absolute;
    overflow: hidden;
    max-width: 100%;
    width: 100vw;
    font-family: tahoma;
    background-color: #000000;
    color: #FFFFFF;
    margin: 0 auto;
    top: 0%;
    left: 50%;
    transform: translate(-50%);
    vertical-align: middle;
}
.imgfloatl{
    float: left;
}
.imgfloatr{
    float: right;
}
#menubuttons{
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}
.mbut{

}
<!DOCTYPE html>
<html>
<head>
    <title>ИК</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
    <img src="./img/logoc.png" height="90%" style="padding-left: 2%; padding-right: 2%; padding-top: 1px;" class="imgfloatl">
    <img src="./img/anketared.png" height="90%" style="padding-left: 2%; padding-right: 2%; padding-top: 1px;" class="imgfloatr">
    <div id="menubuttons"><center>
        <button>Кампании</button>
        <button>Участники</button>
        <button>Деятельность</button>
        <button>Поддержка</button>
    </center></div>
</div>
</body>
</html>

1 ответ 1

0

Можно что-то такое сделать..

body{
  margin: 0;
}

#menu {
  height: 1.5em;
  background-color: #000000;
  color: #FFFFFF;
  display: flex;
  padding: 0.5em;
}

#head_menu {
  width: 100%;
  height: 1.5em;
  text-align: center;
  display: flex;
  justify-content: center;
  list-style: none;
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.head_menu_buttos {
  height: 1.5em;
  line-height: 1.5em;
  align-self: center;
  padding: 5px;
  color: white;
  cursor: pointer;
  /*margin-left регулирует расстояние между элементами списка в меню*/
  margin-left: 15px;
}

.head_menu_buttos:nth-child(1) {
  /*убираем отступ слева у первого элемента списка*/
  margin-left: 0px;
}

.head_menu_buttos:hover {
  padding: 0.25em;
  border: solid 1px rgba(255, 255, 255, 0.3);
  border-radius: 0.5em;
}

.head_menu_img {
  align-self: center;
  cursor: pointer;
  height: 60%;
}
<div id="menu">
  <img src="https://www.dorogavrim.ru/img/flagi/flag_svaziland.jpg" class="head_menu_img imgfloatl">
  <ul id="head_menu">
    <li class="head_menu_buttos">Кампании</li>
    <li class="head_menu_buttos">Участники</li>
    <li class="head_menu_buttos">Деятельность</li>
    <li class="head_menu_buttos">Поддержка</li>
  </ul>
  <img src="https://www.dorogavrim.ru/img/flagi/flag_svaziland.jpg" class="head_menu_img imgfloatr">
</div>

2
  • Можно как-то сделать расстояние между пунктами списка меньше? А ещё получается так, что у контейнера есть пробелы между его границей и границей окна, можно ли это как-то исправить? 11 ноя 2022 в 12:24
  • @КВАзино Расстояние теперь регулирует .head_menu_buttos { margin-left.. "пробелы между его границей и границей окна" Возможно у body по дефолту margin установлен, его нужно скинуть.
    – Rudi
    11 ноя 2022 в 14:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.