Почему <a> переполнение содержимого тега, содержащее границы div?

Я хочу получить горизонтальное меню с неупорядоченным списком внутри div. Проблема в том, что переполнение тегов (больше), а затем содержит div. Или, с другой стороны, div учитывает полный размер тегов.Почему <a> переполнение содержимого тега, содержащее границы div?

Css

div.menu { 
    background: grey; 
} 
div.menu > ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
div.menu > ul > li { 
    display: inline; 
} 
div.menu > ul > li > a:link, div.menu > ul > li > a:visited { 
    color: #FFFFFF; 
    background-color: orange; 
    padding: 4px; 
    text-align: center; 
    text-decoration: none; 
}

Html

<div class="menu"> 
    <ul> 
     <li> <a href="www.google.com">Google</a> 
     </li> 
     <li> <a href="www.google.com">Google</a> 
     </li> 
     <li> <a href="www.google.com">Google</a> 
     </li> 
     <li>No overspill 
     </li> 
    </ul> 
</div>

JSFiddle

Проблема имеет что-то делать с дополнением, потому что если я установить отступы в 0 нет перелива. Почему это происходит и как лучше всего подходит к этому?

источник

2015-01-07 Anonymous

@SleekGeek: Taller. it тег расширяется выше и ниже, содержащий div. Это видно, если вы запускаете пример JSFiddle. –

Добавить отображение: встроенный блок; к тегу a css –

@ Мне кажется несправедливым, что я могу принять только один ответ, поскольку каждый дал мне другое представление, и те, кто ответил, сделали это почти в одно и то же время. –

Добавьте строку кода ниже в свой код LI кода CSS.

display: inline-block;

div.menu { 
 
    background: grey; 
 
} 
 
div.menu > ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div.menu > ul > li { 
 
    display: inline; 
 
} 
 
div.menu > ul > li > a:link, div.menu > ul > li > a:visited { 
 
    color: #FFFFFF; 
 
    background-color: orange; 
 
    padding: 4px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; /* This line solves the overlapping problem */ 
 
}

<div class="menu"> 
 
    <ul> 
 
     <li> <a href="www.google.com">Google</a> 
 
     </li> 
 
     <li> <a href="www.google.com">Google</a> 
 
     </li> 
 
     <li> <a href="www.google.com">Google</a> 
 
     </li> 
 
     <li>No overspill 
 
     </li> 
 
    </ul> 
 
</div>

источник

2015-01-07 19:17:51

Набивка на встроенных элементов не влияет на размер элемента. Прокладка будет просто видна вокруг элемента.

Вы можете использовать display: inline-block; на элементах списка, а затем display: block; по ссылкам, которые будут содержать отступы в размере элементов.

Другим подходом было бы использовать float: left; на элементах списка и display: block; по ссылкам. Это зависит от того, как вы хотите макет, так как это свяжет ссылки друг с другом, а не разделяет пробелы.

источник

2015-01-07 19:17:59 Guffa

Tnx. Это ближе всего к объяснению. Поэтому, если я понимаю: на встроенных элементах прокладка не добавляется к расчетному сайту, но это видно. Смутно подобны полям, которые могут перекрываться. –

@ user3104537: Да, это похоже на поля, за исключением того, что отступы также не влияют на окружающие элементы. Вы можете увидеть пример этого на желтом элементе внизу этой страницы: http://archive.webstandards.org/css/macie/inlinedemo1.html – Guffa

div.menu > ul > li > a{ 
    display:inline-block; 
}

Должен исправить переполнение.

источник

2015-01-07 19:18:37

Почему <a> переполнение содержимого тега, содержащее границы div?

ответ

Смежные вопросы