Jump to content
  • 0

Горизонтального меню на списке


c01nd01r
 Share

Question

Доброго времени суток!

Делаю горизонтальное меню с разделителями. Разделители обычный слэш  "/"

Решил использовать псевдоэлементы для вставки разделителей.

 

Контейнер имеет float и его размеры не известны (резиновый). Естественно расстояние между элементами списка должно "тянуться". 

По сему решил сделать margin у псевдоэлементов с процентным значением. 

 

В итоге наблюдаю, что последний элемент списка переносится из-за недостатка ширины контейнера. Причем видно, что ширина контейнера равна ширине блока без margin у псевдоэлемента. 

Складывается ощущение, что браузер просто "теряется", ибо не знает откуда взять значения для расчета полей. 

Замечу, что при "ручном" изменении ширины контейнера проблема пропадает.

Собственно вопрос - должен ли браузер при расчете ширины контейнера учитывать поля у псевдоэлементов? Думаю, да. 

И как это пофиксить?

 

Код с примером в песочнице: http://dabblet.com/gist/7614971

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Это я знаю, только в моём случае она как-то косячно рассчитывается :) Последний элемент в списке не должен так переносится. Или я чего-то упустил.

Link to comment
Share on other sites

  • 0

Может ли поставить inline-block? Только там какая-то странная реакция, то как надо в стркоку, то все падает - не пойму от чего т акое поведение

Edited by Zverushka
Link to comment
Share on other sites

  • 0

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

а вообще я не совсем понял этой задумки

Контейнер имеет float и его размеры не известны (резиновый). Естественно расстояние между элементами списка должно "тянуться".

то как у вас сейчас сделано ничего тянуть не будет. не могу понять ваших желаний, подробнее объясните какой эффект хотите получить (можно со скриншотами)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By digenis
      Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке.  https://jsfiddle.net/Lyguc520/3/

    • By Gruzin
      Всем привет, подскажите пожалуйста как добиться такого эффекта при наведении как на видео.
      Заранее всех благодарю.
      ScreenRecorderProject2.mkv
    • By Sve
      Всем привет :)
      Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
      Выходит, как на второй, меню спадает вниз. 
      Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
      Код кидаю:
      *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }  


    • By Рома
      Доброго дня!
      Есть многоуровневое меню (картинка 1)
      Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.
      Вот код в этом положении
      .cs-menu-container .dropdown, ul.type-category li .sub-cate { position: absolute; top: auto; left: 0; z-index: 1000; float: none; min-width: 230px; padding: 0; margin: 0; border: 1px solid #cccccc; border-top:2px solid #c04a62; background: #fff; Что я делаю: 
      меняю значение left: на -200px;
      В итоге получаю нужное мне расположение (картинка 2)
      Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
       
      Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
       



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy