水平リストが行内に表示されています

Question

Imは水平リストを作成しようとしていますが、ブラウザに表示されるときは直線ではなく階段状に表示されます。

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> 

Answer 1

フロート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; 
} 

Answer 2

アンカーではなくli要素に表示に関するスタイル（display、float、width、heightなど）を適用します。

Answer 3

Awww ...悪名高い「一連のリスト項目を水平に並べて、ナビバーの均等なリンクを得る」トリック！

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} 

：

はそうのような "インラインブロック" CSSの引数を使用してみてください。これは、ナビゲーションバーの上部にあるリンクにTwitter Bootstrapが使用しているのと同じルールです。