如何使这些链接水平而不是垂直？

Question

这就是链接的样子:http://www.screencast.com/users/rockstarvisible/folders/Jing/media/6d18eddb-4785-459e-88a5-b6448a5771ef

css文件可以在rankingclimber.com/css/style.css上找到

这是footer.php文件中的代码:

`

    <h3>Website Links</h3>

    <ul>
        <li><a href="what-is-ranking-climber.php">What is Ranking Climber?</a>&nbsp; &nbsp; 
        <li><a href="about-us.php">About Us</a></li>
        <li><a href="contact-us.php">Contact Us</a></li>
        <li><a href="press.php">Press</a></li>
        <li><a href="terms.php">Terms &amp; Conditions</a></li>
        <li><a href="privacy.php">Privacy Policy</a></li>
    </ul>

`

Answer 1

人们到处都有他们的答案..

的<ul>和<li>元件被自然块级元素...这意味着除非适当的宽度设置,他们将占用"线"它们存在于的整个宽度...

你<ul>可以留块级别的,如果你想(通常是非常有用的),所以你不希望应用display : inline到你的<ul>...

...

你可以使用:

li {
    display : inline;
}

这将把你<li>变成'内联'元素 - 但是你失去了块级元素(自定义宽度/高度,浮点数等)的多功能性,因此更常用的替代方法是使用:

li {
   float : left;
}

您可能希望确保填充/边距符合您的审美需求,例如:

li {
   float : left;
   padding : 0;
   margin : 0 0 0 12px; // 12px left margin, for some breathing room
}

如果您没有指定宽度,浮动块将缩小到其内容的宽度(给出或取几个像素)...这对于创建"标签"非常方便.

希望这能解决这个问题中的任何困惑.请参阅此处的示例:http://jsfiddle.net/X3hAZ/(我添加了黑色边框,以便您可以看到每个块的尺寸.)