의 HTML + CSS의 : 테이블을

가능한 복제를 사용하지 않고 바닥 글 탐색 요소 사이에 동일한 거리 : 나는 텍스트입니다 바닥 글 요소를 넣어하려고
Fluid width with equally spaced DIVs 의 HTML + CSS의 : 테이블을

. 나는 텍스트 요소들 사이의 동일한 거리를 가지려고 노력했다.

<nav> 
    <ul> 
    <li><a>Item Reg</a></li> 
    <li><a>Item Sm</a></li> 
    <li><a>Item Very Long</a></li> 
    <li><a>Item Reg</a></li> 
    </ul> 
</nav>

다음은 구현하려는 시나리오를 설명하는 이미지입니다. 왼쪽 및 오른쪽 요소는 항상 각각 왼쪽 및 오른쪽으로 정렬됩니다. Expected Footer Element Behaviour

어떻게하면 css 및 html로 할 수 있습니까? 참고 : CSS3는 허용됩니다.

출처

2012-01-10 Hossain Khan

는 사실 내가 유사한 문제에 대답을 발견 http://stackoverflow.com/questions/8724665/flexible-horizontal-navigation-with-equal-distance-between-nav-elements 및 http://stackoverflow.com/ 질문/6865194/fluid-width-with-equalally-spaced-divs ... 모든 도움에 감사드립니다. –

사용 ca를 패딩 왼쪽과 같이 각 <li> 뭔가 :

li{ 
position:relative; 
float:left; 
padding-left:20px;}

출처

2012-01-10 13:58:46

오른쪽에 손이 닿을 때까지 패딩의 픽셀 수를 늘리십시오. –

당신은 당신이 단순히 사용 요소의 고정 번호를 가지고 가정이 방법

<div class="footer"> 

    <div style="width:200px; float:left;"> 

     <ul style="list-style:none"> 
      <li>1</li> 
      <li>2</li> 
     </ul> 

    </div> 

    <div style="width:200px; float:left;"> 

     <ul style="list-style:none"> 
      <li>1</li> 
      <li>2</li> 
     </ul> 

    </div> 

    <div style="width:200px; float:left;"> 
     <ul style="list-style:none"> 
      <li>1</li> 
      <li>2</li> 
     </ul> 

    </div> 

    <div style="clear:both"></div> 

</div>

출처

2012-01-10 14:00:21

고맙습니다 GvS 지금은 어떻게해야 .. ..--) –

에서 그것을 얻을 수 있습니다 :

ul{ 
    padding:0 20px 0 20px; 
    width:100%; 
} 

li{ 
    display:inline; 
    float:left; 
    width:25%; 
} 

<ul> 
    <li>One</li> 
    <li>Two</li> 
</ul>

출처

2012-01-10 14:00:43 detheridge02

한 가지 방법은 폭에 백분율 포인트를 사용하는 것입니다.

ul { 
    width: 100%; 
} 
ul li { 
    display: table-cell; 
    width: 25%; 
    text-align: center; 
}

출처

2012-01-10 14:00:51 CNeo

의 HTML + CSS의 : 테이블을

답변

관련 문제