Блок внутри inline-block

[Launder]

http://jsfiddle.net/Launder/38femeh7/2/

<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>	    </ul>	</li>	<li><a href="#">Немецкая кухня</a>            <ul>		<li><a href="#">Гусь по-берлински</a></li>		<li><a href="#">Пирог яблочный с грецкими орехами</a></li>		<li><a href="#">Cвиные отбивные под лимонно-соевым соусом</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;			border: 1px solid #fff;			-moz-box-sizing: border-box;			-webkit-box-sizing: border-box;			box-sizing: border-box;			font-size: 14px;		}.menu a		{			text-decoration: none;                        display: block;		}.menu ul		{			list-style: none;		}

Почему когда ставишь .menu a  {display: block}, а, как блочный элемент, с не заданной шириной, не растягивает li, который является inline-блоком и, по-идее, его размеры должны определяться размерами внутренних элементов?

[Switch74]

потому что 'a' у вас занимает 100% родителя, а у 'li' размер от чего должен зависеть?

[Launder]

С учётом того, что li у нас inline-block разве его размер не должен зависеть как раз от размера вложенных блоков? а с учётом того, что блок, по умолчанию, занимает всю доступную ширину, разве не должен он растягивать весь элемент?

[Switch74]

А что именно вам не нравится в вашем примере, я понять не могу?

[antonKar]

Вот когда внутри блочного элемента будет достаточно контента, чтобы растянуть li, тогда он и растянется.

 

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

[Launder]

По умолчанию, у инлайн-блока, ширина как у строчного элемента. Ну ясно, в принципе, если его явно не растянуть, по умолчанию блок его не растянет.