Question

好的代码列在下面，当我按如下方式调整css时：

.Nav {
color:red;
float:left;
display:inline;}

它不会显示内联？我究竟做错了什么？我确定这是一个愚蠢的问题。

<head></head>

<body>
    <div class="Nav">
        <ul>
            <li>Home</li>
            <li>Sign Up</li>
            <li>About</li>
            <li>Contact Us</li>
        </ul>
    </div>
</body>

Answer 1

不要同时使用float和dislay内联使用`

display:inline-block;

它将完美地运作

我还建议你阅读这篇文章，它是一篇简短的文章，但有很多帮助 click this to read the article 至少它确实帮了我很多，并清除了浮动和显示的概念

Answer 2

div本身以内联方式显示，但由于它是body中唯一的元素，因此没有明显效果。

您需要在li元素上设置它：

<强> CSS

div.nav ul li {
    float: left; /* All li elements inside the div.nav are floated to left... */
    display: inline; /* ...and displayed inline – but it does not make sence,
        since a floating element cannot be inline. */
}

<强> HTML

<div class="nav">
    <ul>
        <li>Home</li>
        ...

Answer 3

会的。您的div是具有.Nav类的div，因此div将以内联方式显示。尝试：

.Nav li{
  display:inline;
}

Answer 4

这是一个jsfiddle example

.Nav ul li{
color:red;
display:inline;}

Answer 5

你可以在li元素上放置display：inline，它们将在一个唯一的行上。

正如您在此处所见： http://jsfiddle.net/b31krn9b/

CSS：

.Nav {
    color:red;
    float:left;
}
.Nav li {
    display:inline;
}

另一种对齐方式：

使用float：http://jsfiddle.net/b31krn9b/1/
甚至显示：inline-block（这样更好，因为你可以使用margin-right和left）：http://jsfiddle.net/b31krn9b/2/

无法弄清楚显示内联？

5 个答案: