Question

我试图创建一个水平的List唱歌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>

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元素而不是锚点。

Answer 3

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用于导航栏顶部链接的规则相同。

水平列表正在显示

3 个答案: