显示：内联不能与 div 一起正常工作答案

【问题标题】：display: inline doesn't work properly with div显示：内联不能与 div 一起正常工作
【发布时间】：2015-06-28 09:11:16
【问题描述】：

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

应该是这样的：

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

asdfwefwefwe

cofwerferwefw（内容）

为了识别 div，我为它们添加了背景色。每当我使用 display-inline 时，它看起来像这样。全站div（红色），主要内容（橙色）

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

当我使用显示时：inline-block 整个站点 div（红色）、主要内容（橙色）、导航列表 - 行（蓝色）

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

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

这是导航列表的 css - 行：

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

非常感谢您阅读并希望得到好的答案。

【问题讨论】：

标签： html css

【解决方案1】：

除了使用 li 和 ul 之外，我建议您在必须创建导航栏时使用引导导航栏类。您可以在线阅读它的优势 (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>

【讨论】：

【解决方案2】：

首先，使用 Home,Story,Hereos All in list 标签！！

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

然后样式然后元素

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

您的输出将是
http://myslambook.pe.hu/demo.png

【讨论】：

【解决方案3】：

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>

【讨论】：