CSS 가로 탐색 간격

Question

5 개의 고르게 간격을 둔 링크가있는 CSS에서 가로 방향 탐색 모음을 만들려고합니다. html로 희망과 같이 유지됩니다 :

<div id="footer"> 
    <ul> 
     <li><a href="one.html">One</a></li> 
     <li><a href="two.html">Two</a></li> 
     <li><a href="three.html">Three</a></li> 
     <li><a href="four.html">Four</a></li> 
     <li><a href="five.html">Five</a></li> 
    </ul> 
</div> 

그래서 CSS로, 나는 고르게 바닥 글 DIV 내에서 공간이 그들에게 싶습니다. 지금까지 저는 이것을 사용하고 있습니다 :

div#footer{ 
    height:1.5em; 
    background-color:green; 
    clear:both; 
    padding-top:.5em; 
    font-size:1.5em; 
    width:800px; 
} 
div#footer ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
div#footer li{ 
    width:155px; 
    display:inline-block; 
    text-align:center; 
} 

이것은 꽤 잘 작동하지만, 원하지 않는 li 사이에는 간격이 있습니다. 그래서 너비가 160px 대신 155px를 사용 했으므로 각 li 사이에는 약 5px의 공간이 있습니다. 그 간격은 어디에서 오는거야? 어떻게 제거 할 수 있습니까? 글꼴 크기를 늘리면 간격도 늘어납니다. 당신이 사용하는 경우

Answer 1

나는이 나에게 일어날 했어. 불행히도 브라우저에서 목록 항목 사이의 줄 바꿈을 사용하여 공백으로 렌더링합니다. 때문에 인라인 스타일에 <li> 요소들 사이의

<div id="footer"> 
    <ul> 
    <li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li> 
    </ul> 
</div> 

Answer 2

는 :

div#footer li{ 
    width:160px; 
    display:block; 
    float: left; 
    text-align:center; 
} 

을 그것은 모든 사랑스러운 모습 : D

Answer 3

공간에서, 공백과 그들 사이의 캐리지 리턴에 기인한다 : 해결하려면, 당신의 HTML을 변경합니다. 작성한 경우 :

<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li> 

더 이상 공백이 표시되지 않습니다.

인라인 블록이 IE6에서 제대로 표시되는지 모르겠습니다. 따라서 float 접근 방식을 시도해 볼 수 있습니다.

Answer 4

div#footer ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

div#footer li{ 
    width:155px; 
    float:left; 
    display:block;   
} 

이 코드는 수평 적으로 수평으로 배치되어 있습니다. li 요소 사이에 공백을 추가하려면 :

div#footer li{ 
    width:155px; 
    margin-right: 5px; //5px Space between li elements 
    float:left; 
    display:block;   
} 

Answer 5

이것은 CSS flexbox로 완전히 해결되었습니다.

CSS- 트릭은 here과 같은 훌륭한 글을 가지고 있고, <ul>here을 사용하는 코덱스 예제입니다.

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    margin: 0px; 
 
    
 
    line-height: 40px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    flex: 1 1 auto; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

나는이 꽤 오래 실현,하지만 난 지금이 ​​너무 다른 사람 도움이 될 2015 7 년 후이 문제가 발생했습니다.