显示：内联不适用于div

Question

我是HTML / CSS初学者，目前正在构建一个简单的网站。 我想做的是让3个div。 一个用于整个网站，一个用于内容，一个用于导航列表-行。

它看起来应该像这样：

_ _ _ _ _ _（导航列表-行）

asdfwefwefwe

cofwerferwefw（内容）

为了识别div，我对它们进行了背景着色。 每当我使用display-inline时，它看起来都是这样。 整个网站div（红色），主要内容（橙色）

http://puu.sh/iFyeC/a48443bc07.png

当我使用显示广告时：内嵌整个网站div（红色），主要内容（橙色），导航列表-行（蓝色）

http://puu.sh/iFyil/40e73716e7.png

现在它可以工作了，但是我想要一个导航-行栏，而不是排名列表，但是我不知道该怎么做。

这是我的导航列表的CSS-行：

.navigationlist{
    height:20%;
    width:100%;
    display:inline-block;
    background-color:blue;
}

非常感谢您的阅读和希望得到很好的答复。

Answer 1

首先，在列表标签​​中使用“家庭，故事，Hereos全部”！

<ul>
<li>Home</li>
<li>Story</li>
<li>Hereos</li<
......
<ul>

然后样式然后元素

li
{
display:inline;
padding:10px;
}

你的出将
http://myslambook.pe.hu/demo.png

Answer 2

 li { display: inline-block; border-radius: 5px; font-size: 0.4em; margin: 1% auto; padding: 1%; text-align: center; border: 2px solid #000; background-color: rgba(255, 255, 255, 0.7); } 

 <ul> <li>Hello</li> <li>Stack Overflow</li> <li>World</li> </ul> 

Answer 3

除了使用li和ul外，我还建议您在必须创建导航栏时都使用bootstrap navbar类。 您可以在线阅读其优势（ http://getbootstrap.com/components/#navbar ），此外，默认情况下它也允许您突出显示li之一。 在您的情况下，它将是类似的。

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Hello</a></li>
                <li><a href="#">Stack Overflow</a></li> 
                <li><a href="#">World</a></li> 
            </ul>
        </div>
    </div>
</nav>