水平列表顯示在行

我試圖創建一個水平列表唱歌的HTML和CSS，但是當在瀏覽器中顯示它似乎下降的步驟，而不是在一條直線，任何想法可能會導致這一點？水平列表顯示在行

CSS

#nav li a { 
display:block; 
float:left; 
text-indent: -9999px; 
height: 50px; 
width: 150px; 
background-image:url(images/buttons.gif); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: 0% 0%; 
background-clip: border-box; 
background-origin: padding-box; 
background-size: auto auto; 
margin-left:15px; 
} 

#nav li a:hover { 
opacity: 0.5; 
} 

#nav li.one a { 
background-position: 0pt 0px; 
} 

#nav li.two a { 
background-position: 0pt -88px; 
} 

#nav li.three a { 
background-position: 0pt -176px; 
}

HTML

<ul id="nav"> 

<li class="one"><a href="#"><strong>One</strong> Selected Works on Display</a></li> 
<li class="two"><a href="#"><strong>Two</strong> Thoughts, Links, Inspiration &amp; Miscellany</a></li> 
<li class="three"><a href="#"><strong>Three</strong> Those Who Have &amp; Continue to Inspire</a> </li> 

</ul>

來源

2012-01-11 Gezzamondo

浮法LI標籤，而不是A標籤。

#nav li a { 
display:block; 
float:left;  <--- move to LI 
text-indent: -9999px; 
height: 50px; 
width: 150px; 
background-image:url(images/buttons.gif); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: 0% 0%; 
background-clip: border-box; 
background-origin: padding-box; 
background-size: auto auto; 
margin-left:15px; 
}

來源

2012-01-11 15:54:45

當div向下摺疊超過默認大小時，浮動不會保持對齊狀態。你必須使用「display：inline-block」規則設置li對齊方式 – thoughtpunch 2012-01-11 16:04:19

在「inline-block」甚至被髮明之前，人們就已經成功地使用了浮動功能來製作水平菜單。 – 2012-01-11 16:06:57

將關於顯示的樣式（例如display，float，width，height）應用到li元素而不是錨點。

來源

2012-01-11 15:54:56

Awww ...臭名昭着的「嘗試水平對齊一系列列表項目，以獲得在導航欄中平均病態鏈接」的詭計！

嘗試使用了「inline-block的」 CSS的說法，像這樣：

HTML

<ul> 
    <li>Link 1</li> 
    <li>Link 2</li> 
    <li>Link 3</li> 
</ul>

CSS

li {display:inline-block; //add margin and padding to make it look pretty}

這應該是它。這與Twitter Bootstrap用於導航欄頂部鏈接的規則相同。

來源

2012-01-11 16:02:52 thoughtpunch

水平列表顯示在行

回答

相關問題