html頁腳與css

Question

我有以下問題：

我想創建一個頁腳。該頁腳應該看起來像：

text headline   link 1 | link 2 | link 3 

我的想法是使用div作爲容器。在HTML中，我仍然不知道要使用什麼。通過使用dl或ul來實現它會更好嗎？

，所以我有以下的HTML做到了用dl：

<div id="footer"> 
     <dl> 
     <dt>text headline</dt> 
     <dd>link 1</dd> 
     <dd>link 2</dd> 
     <dd>link 3</dd> 
     </dl> 
    </div> 

對CSS：

#footer { 
    height: 200px; 
    font-size: 14px; 
    width: 1200px; 
} 
#footer dl { 
    text-align: center; 
    display: inline-block; 
} 
#footer dl dd { 
    list-style-type: none; 
    float: left; 
    width: 100px; 
    position: relative; 
} 

的問題是，我不知道怎麼加連字符。另一個問題是標題位於鏈接之前。這裏是例子：

http://jsfiddle.net/fFddz/2/

所以如果有一個人誰可以幫助我，我真的將不勝感激。非常感謝。

Answer 1

如果你真的想要連字符。這是我能做的最好的。 http://jsfiddle.net/fFddz/9/

如果你能活下去，我會寫下面的內容。

HTML

<div id="footer"> 
<ul> 
    <li><a>...</a></li> 
    <li><a>...</a></li> 
    <li><a>...</a></li> 
    .... 
</ul> 
</div> 

CSS

#footer div{ 
     /**what you already have***/ 
} 

/**Makes the items appear in a line. But you can't define the width of an inline element.**/ 
#footer li{ 
    display:inline; 
    float:left; 
} 

#footer a{ 
    display:block; /**Allows you to define a width.*// 
    text-align:center; 
} 

Answer 2

嘗試使用

<div id="footer"> 
     <ul> 
     <li>text headline</li> 
     <li>link 1</li> 
     <li>link 2</li> 
     <li>link 3</li> 
     </ul> 
    </div> 

您的標記，並

footer { 
    height: 200px; 
    font-size: 14px; 
    width: 400px; 
} 


#footer li { 
    text-align: center; 
    display: inline-block; 
    list-style-type: none; 
    float: left; 
    width: 100px; 
    position: relative; 
} 

爲你的CSS

Answer 3

您可以使用UL此如下工作示例：

http://jsfiddle.net/fFddz/5/

Answer 4

可以將邊框與:first-child僞選擇器組合使用，以將其限制爲除第一個元素之外的所有元素。

#footer dl dd { 
    list-style-type: none; 
    float: left; 
    width: 100px; 
    position: relative; 
    border-left: 1px solid #000000; 
} 

#footer dl dd:first-child { 
    border-left: 0; 
} 

Answer 5

，我能想到的將整個工作幾乎所有的瀏覽器中使用以下樣式最簡單的方法：

#footer dl { 
    display: inline-block; 
} 
#footer dt { 
    float: left; 
    display: block; 
} 
#footer dl dd { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    float: left; 
    display: block; 
    position: relative; 
    width: 100px; 
    text-align: center; 
    border-right: solid 1px #000; 
} 
#footer dl dd.last { 
    border: none; 
} 

並與這些樣式，你可以使用下面的HTML：

<div id="footer"> 
    <dl> 
     <dt>text headline</dt> 
     <dd>link 1</dd> 
     <dd>link 2</dd> 
     <dd class="last">link 3</dd> 
    </dl> 
</div> 

這裏是它的小提琴：我想建議你把鏈接在一個<dd>，那麼你將能夠使用僞http://jsfiddle.net/sarcastyx/Dbh9H/

Answer 6

對於第一個鏈接選擇:first-child隱藏左邊界

爲dt和dd設置float:left，使其在一個線和dl設置overflow: hidden清除浮動

HTML

<div id="footer"> 
     <dl> 
     <dt>text headline</dt> 
     <dd> 
      <a href="">link1</a>   
      <a href="">link2</a>   
      <a href="">link3</a>   
     </dd> 
     </dl> 
    </div> 

CSS

footer { 
    height: 200px; 
    font-size: 14px; 
    width: 500px; 
} 
#footer dl { 
    text-align: center; 
    display: inline-block; 
    overflow:hidden;    
} 
#footer dt { 
    float: left; 
} 
#footer dd { 
    float: left; 
} 
#footer dd a { 
    border-left: 1px solid #000; 
    list-style-type: none; 
    width: 100px; 
    display:inline-block; 
    *display: inline; zoom: 1;  
    position: relative; 
} 
#footer dd a:first-child { 
    border-left: none; 
} 

小提琴http://jsfiddle.net/fFddz/11/

Answer 7

嘿看看這個http://jsfiddle.net/fFddz/13/

更改HTML結構UL和改變CSS。