css 꼬리말 메뉴 표시 : 표 및 항목의 균형이 맞지 않음

Question

안녕하세요 저는 너비 때문에 항목의 균형을 조정해야하는 꼬리말을 작성하려고합니다.

예를 들어, 문장이 길면 더 큰 패딩이있는 것 같습니다. "블로그"에는 작은 패딩이 있습니다. "첫 번째 열은 매우 길다"는 큰 열이 있습니다.

도움을 얻으려면 Thx.

<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/

Answer 1

이것은 매우 일반적인 현상이다. 그 대신 단어가 넘쳐의 또 다른 문제를 야기하기 때문에, width:16.66%;

그러나 예를 들어, 당신을 도울 비율에 폭을 사용하여 요소의 폭을 균형을하고자하는 경우, 당신은 또한 사용해야 overflow:hidden 및 word-wrap:break-word