2010-11-12 29 views
3

這是我到目前爲止已經完成:獲取標籤向右轉?

<html> 
<head> 
<style> 

/* Tabs */ 
#navlist { 
     padding: 3px 0; 
     margin-left: 0; 
     border-bottom: 1px solid #778; 
     font: bold 12px Verdana, sans-serif; 
     /* WARNING: when using font-size/font-family instead of font, 
      do not forget to set line-height:normal otherwise 1px more is shown 
      between tabs and their bottom line in IE8 and FF3.6 */ 
} 

#navlist li { 
     list-style: none; 
     margin: 0; 
     display: inline; 
} 

#navlist li a { 
     padding: 3px 0.5em; 
     margin-left: 0px; 
     border: 1px solid #778; 
     border-bottom: none; 
     background: #DDE; 
     text-decoration: none; 
} 

#navlist li a:link { color: #448; } 
#navlist li a:visited { color: #667; } 

#navlist li a:hover { 
     color: #000; 
     background: #AAE; 
     border-color: #227; 
} 

#navlist li a#current { 
     background: white; 
     border-bottom: 1px solid white; 
} 
</style> 
</head> 
<body> 
       <div id="navcontainer"> 
         <ul id="navlist"> 
            <li><a id="current" href="#">Col1</a></li> 
            <li><a href="#">Col2</a></li> 
            <li><a href="#">Col3</a></li> 
          </ul> 
       </div> 
</body> 
</html>​ 

而且它保存到http://jsbin.com/uvako3/2。感謝您的幫助

+0

+1簡單的工作HTML + CSS製作標籤的很好的例子。我在你的代碼中加了一個小小的評論,因爲在IE8/FF3.6中發現了什麼問題之前,我敲了我的腦袋2個小時。 – 2012-03-23 18:33:57

回答

3

只需將text-align: right;添加到#navlist css。

說明:您正在使您的清單項目內聯元素。這使得他們遵循適用於文本的一般規則。因此,只需設置文本對齊,即可指定內聯元素的對齊位置。

+0

是這樣做的。 – 2010-11-12 19:19:04