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-equal-spaced-divs ...感謝所有的幫助。 – 2012-01-10 14:06:15

您CA使用填充左每個<li>是這樣的：

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

來源

2012-01-10 13:58:46

並增加填充中的像素數量，直到右手邊觸及四肢。 – 2012-01-10 14:15:34

可以實現它以這種方式

<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

thanx GvS現在我知道了如何做.. :-) – 2012-01-10 14:06:01

假設你有元素的固定數量的簡單的使用方法：

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：頁腳導航元素之間的距離相等，而無需使用表

回答

相關問題