Jump to content
  • 0

Границы inline-block


Launder
 Share

Question

http://jsfiddle.net/Launder/d70c2kg1/4/

<ul class="menu">		        <li><a href="#">Разные вкусности</a>				<ul>					<li><a href="#">Суп с клёцками</a></li>					<li><a href="#">Пироги с капустой и яйцом</a></li>					<li><a href="#">Торт Медовый</a></li>				</ul>			</li>			<li><a href="#">Узбекская кухня</a>				<ul>					<li><a href="#">Плов по-бухарски с изюмом</a></li>					<li><a href="#">Плов с бараниной и нутом</a></li>					<li><a href="#">Халва из ядрышек урюка</a></li>					<li><a href="#">Лагман по-хорезмски</a></li>				</ul>			</li>			<li><a href="#">Итальянская кухня</a>				<ul>					<li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li>					<li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li>					<li><a href="#">Кролик по-лигурийски с красным вином</a></li>					<li><a href="#">Миндальные бискотти с медом</a></li>				</ul>			</li></ul>
.menu 	{			background: -moz-linear-gradient(to top, #ecc, #fff8f8);			background: -webkit-linear-gradient(to top, #ecc, #fff8f8);			background: -o-linear-gradient(to top, #ecc, #fff8f8);			background: -ms-linear-gradient(to top, #ecc, #fff8f8);			background: linear-gradient(to top, #ecc, #fff8f8);			border: 1px solid #888; 			border-top: 0;			padding: 0; margin: 0;			font-family: Arial, Helvetica, sans-serif; 			font-size: 0;		}.menu > li		{			display: inline-block;                        width: 200px;                        height: 75px;      			border: 1px solid #fff; 			-moz-box-sizing: border-box;			-webkit-box-sizing: border-box; 			box-sizing: border-box;			font-size: 14px;                        position: relative;		}.menu a		{			text-decoration: none;                        display: block;		}.menu ul		{			list-style: none;		}.menu > li:hover::after 		{			content: '';			position: absolute;			top: 0;			left: 0;			right: 0;			bottom: 0;			-webkit-box-shadow: inset 0 0 10px #777;			-moz-box-shadow: inset 0 0 10px #777;			box-shadow: inset 0 0 10px #777;		}

Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его?
Я это говорю, потому что вижу, что выделяет тень (при наведении на блок).

С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список.

Как объяснить такое двойное поведение?

Edited by Launder
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Да, что-то я перемудрил.

Убрал фиксированные размеры li.

И добавил .menu ul свойство position: absolute

Я правильно понимаю, что теперь этот список (ul)

1. располагается относительно li (поскольку li - родительский элемент и у него position: relative)

2. но при этом, он (ul) уже В НЕГО (li) НЕ ВХОДИТ?

 

http://jsfiddle.net/Launder/buok0m1s/

Edited by Launder
Link to comment
Share on other sites

  • 0

И, если теперь это отдельный элемент (ul), то можно ли сделать их размеры (li и находящегося внутри него ul) взаимообусловленными?

Вот так?

http://jsfiddle.net/9xqx8pn1/

  • Like 1
Link to comment
Share on other sites

  • 0

Вот как-то так:

http://jsfiddle.net/Launder/gmLvp2ce/1/

 

Немного непонятно: зачем нужен псевдоэлемент?

Вроде ж и без него работает и должно, по идее, работать.

Но всё же, в каких ситуациях, его наличие становится значимым?...

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 Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By SnowSilver
      Почему line-height на высоту inline элемента не влияет, а на inline-block влияет ?
      Например изначально, при дефолтном размере шрифта в 16px, высота строки в хроме показывает 18.18px. И если применим line-height: 1; - то высота не изменится.
      А если мы превратим строчный элемент в inline-block, тогда высота уменьшается до 15.45px - и тогда высота строки равняется почти размеру шрифта. Хотя line-height: 1 это множитель шрифта, по идеи в моем понимание высота должна равняться 16px, а не 15.45.
      Эти значения получены у не стандартного шрифта... Но это сути не меняет.
      Небольшая заготовка - https://codepen.io/anon/pen/Qxpgoe. Правда там у строчного  элемента изначально 17px , а у инлайн блока после установки line-height:1 -  16px.
       
       
       
    • By gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
    • By мурамаса
      Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например
      .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute.
      Как я понимаю float и absolute вместе не работают ?
      Как я понимаю float и absolute вместе не работают ? 
      При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
    • By mr.relax
      Есть страница, c:
      body { 
      max-width: 1200px;
      margin: auto;
      }
      т.е. контент посередине. 

      Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. 
      Ну например: окно браузера уменьшили...

      footer {
      position: fixed;
      bottom: 0;
      }

      "привязывает" <footer> к низу, но растягивает по ширине экрана.
×
×
  • 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