Отображение меню нижнего колонтитула css: таблица и элементы не сбалансированы

css width display

59 просмотра

1 ответ

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

В моем примере, если предложение длинное, кажется, что есть более большое заполнение. «Блог» имеет небольшой отступ, «Первый столбец очень длинный» - большой.

Спасибо за помощь.

<div class=footer>
<UL>
<LI>First column very long</LI>
<LI>Contact us</LI>
<LI>Blog</LI>
<LI>Privacy policy very large title</LI>
<LI>why?</LI>
<LI>The last sentence</LI>
</UL>
</div>


.footer{
width:100%;
 border: 1px solid yellow;
 }
 .footer ul
{
 list-style-type:none;
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding:0;
}

.footer ul li
{
 display:table-cell;
text-align:center;
border:1px solid red;
}

https://jsfiddle.net/rtjposu9/

Автор: Frederic CS Источник Размещён: 08.11.2019 11:00

Ответы (1)


2 плюса

Это очень нормальное явление. Если вы хотите сбалансировать ширину элементов, используйте ширину в процентах, чтобы помочь вам, напримерwidth:16.66%;

Однако, поскольку это вместо этого вызовет другую проблему переполнения слов, вы должны также использовать overflow:hiddenиword-wrap:break-word

Автор: Super Cool Handsome Gel Boy Размещён: 20.08.2016 07:22
Вопросы из категории :
32x32