0

Какой раз я сталкиваюсь с проблемой: если в одном месте вставишь элемент (рисунок, текст), то в каком-то другом месте происходит выталкивание других элементов. Как обойти эту проблему в коде, для того чтобы рисунки (иконки) располагались слева от пунктов меню Каталог товаров (и чтобы пункты меню типа Бытовая техника для кухни, Бытовая техника для дома располагались по центру блоков) вот так:

введите сюда описание изображения

.menu {
  position: relative;
  width: 370px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0.5em 0 0.5em 0.3em;
  cursor: pointer;
}

ul.level1 {
  border: 1px solid thistle;
}

ul.level1>li {
  background-color: #fff;
  border-bottom: 1px solid thistle;
}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: -35px;
  left: 100%;
  max-width: 559px;
  max-height: 1010px;
  padding: 0.5em 0.3em 0.5em 0.3em;
  background-color: #fff;
  border: 1px solid thistle;
  visibility: hidden;
  white-space: nowrap;
  column-count: 2;
}

ul.level2>li {
  padding: 0;
  border-bottom: 1px solid #fff;
}

ul.level2>ul>li {
  padding: 0;
}

ul.level2>li>ul>li {
  padding: 0;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.alignblock {
  text-align: center;
  vertical-align: middle;
}

.submenu__title {
  margin-bottom: 5px;
}

.submenu__title a {
  display: block;
  color: black;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  /* line-height: 1.5; */
  text-decoration: none;
  padding: 3px 5px;
}

.submenu__item {
  /* margin-bottom: 0px; */
}

.submenu__item a {
  display: block;
  color: gray;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  text-decoration: none;
  padding: 3px 5px;
}
<html>
<head>
<link rel="stylesheet" href="mysite.css">
</head>
<body>
<div class="mainwrap">
  <div class="mainmenu">
    <span>
                <span>
                    <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
                    <span class="hamb-top"></span>
    <span class="hamb-middle"></span>
    <span class="hamb-bottom"></span>
    </button>
    </span>
    <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
    </span>

    <nav class="menu">
      <ul class="level1">
        <li id="l1">
          <div class="alignblock">Бытовая техника для кухни</div>
          <ul class="level2">
            <li class="submenu">
              <ul>
                <li class="submenu__title">
                  <a href="#">Крупная бытовая техника</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>

              <ul>
                <li class="submenu__title">
                  <a href="#">New title</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 2</div>
        </li>
        <li id="l3">
          <div class="alignblock">Item 3 +</div>
          <ul class="level2">
            <li>Sub-Item 3-1</li>
            <li>Sub-Item 3-2</li>
            <li>Sub-Item 3-3</li>
            <li>Sub-Item 3-4</li>
            <li>Sub-Item 3-5</li>
            <li>Sub-Item 3-6</li>
            <li>Sub-Item 3-7</li>
            <li>Sub-Item 4-8</li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 4</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 5</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 6</div>
        </li>
      </ul>
    </nav>
  </div>

</div>
</body>
</html>

Вот как пример Рисунок для опробывания

9
  • @Sevastopol' (только не нервничайте и отнеситесь с пониманием к вопросам новичка - извиняюсь за настырность, проявившуюся в смежных вопросах, подчеркиваю смежных, а не тех же). То вопрос был о расстоянии между пунктами, а текущий вопрос про вставку рисунков в каждый пункт меню (как говорит наш президент не смешивайте мух с котлетами -:), шутка) Можете подробно привести на примере приведенного выше в вопросе кода - каким образом организовать вставку (что за before и какие есть еще варианты кроме before).
    – goodsoft
    Commented 25 февр. 2021 в 15:36
  • вот именно я никак не могу вставить иконки. Что за before и какие есть еще методы для вставки иконки?
    – goodsoft
    Commented 25 февр. 2021 в 15:49
  • @Sevastopol' да напишите (мне как новичку будет полезно).
    – goodsoft
    Commented 25 февр. 2021 в 15:58
  • @Sevastopol' все это разные вопросы (подчеркиваю разные по смыслу), связанные с одним объектом - меню.
    – goodsoft
    Commented 25 февр. 2021 в 16:42
  • @Sevastopol: новичку, если он проходит курс и это его задание, должен был препод объяснить, что да как. Если человек взял проект, как самоучка, то за то время, сколько он флудит этим вопросом, уже наизусть учебник бы выучил. Если же "горит" реальный заказ...
    – UModeL
    Commented 25 февр. 2021 в 16:43

1 ответ 1

2

Вот например как вы можете вставлять иконки в меню напротив ссылок, через псевдоэлементы before или after. Как правило, чаще всего так и делают:

a {text-decoration: none; display: block; line-height: 32px; padding: 5px 5px 5px 30px; border-bottom: 1px solid lightgray;}

.one::before,
.two::before {
  content: ""; float: left; display: block;
  margin-right: 16px; width: 32px; height: 32px;
  background-size: 32px;
}

.one::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi09.png);}

.two::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi19.png);}
<a href="#" class="one">Ссылка первая</a>
<a href="#" class="two">Ссылка вторая</a>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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