这是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/（我添加了黑色边框，以便您可以看到每个块的尺寸。）

Answer 2

在css中给出

显示：内联; 浮动：左

我希望这会对你有所帮助。

Answer 3

ul{
    display:inline;
}

在你的css文件中。

Answer 4

添加属性

li { float: left; }

到你的css

Answer 5

@Pawan： - 如果您使用的是css，那么您可以编写下面给出的代码：

ul li {
    float:left;
}

希望它有效............

Answer 6

把ul {margin：0;填充：0}表示ul。然后把{display：inline;填充：0; margin：0} for li ...所以完整的代码是ul{margin:0;padding:0;} li{display:inline; padding:0; margin:0;我认为这应该可以解决问题。 Here is a good example of this, complete with a css hover effect

Answer 7

ul{
   margin:0;
   padding:0;
}
li{
   margin: 0;
   padding: 0;
   display: inline;
}

希望这会奏效。

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

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

`

7 个答案: