Question

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

它应该是这样的：

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

asdfwefwefwe

cofwerferwefw（内容）

要识别div，我将它们背景色。每当我使用display-inline时它就像这样。整个网站div（红色），主要内容（橙色）

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

当我使用display：inline-block整个网站div（红色），主要内容（橙色），导航列表 - 行（蓝色）

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

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

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

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

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

Answer 1

首先，使用Home，Story，Hereos All in list tag !!

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

然后是Style Then元素

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），此外，它还允许您默认突出显示其中一个。在你的情况下，它会像。

<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>

display：inline与div无法正常工作

3 个答案: