Question

我有一个页面，我正在考虑自适应移动设计。现在，我已经找到了主导航，但我有第二个导航，看起来像：

<div id="secondnav">
    <ul>
      <li style="background-color:#000;padding:10px 10px 10px 20px;margin:0px;font-size:150%;font-weight:bold;color:#eee">Overview</li>
      <li><a href="?q=node/16"><span>Accommodations</span></a></li>
<li><a href="?q=node/84"><span>Fitness Classes</span></a></li>
<li><a href="?q=node/40"><span>Cultural Activities</span></a></li>
<li><a href="?q=node/7"><span>Our History</span></a></li>
<li><a href="?q=node/8"><span>We are Secwepemc</span></a></li>
<li><a href="?q=node/30"><span>Pictographs</span></a></li>
<li><a href="?q=node/9"><span>Getting Here</span></a></li>
    </ul>
    </div>

它目前是垂直显示的，当我的网页低于900px时，我需要将其更改为水平方向。 http://www.quaaoutlodge.com/content/lodge - 只是缩小它的宽度，看看我在谈论什么。

谢谢！

Answer 1

下面提出的是“移动优先”方法。基本上，您首先按照它们在最小屏幕上的显示方式设置元素的样式，然后随着屏幕宽度的增加逐渐调整样式，如下例所示。

为了让元素成为内联，你可以使用display:inline-block,但是中间可能存在不需要的小空格，所以我使用display:block结合float:left - 效果相同，没有那些空间。

#secondnav ul li {
    display:block;

}

@media only screen and (min-width: 900px) {
    #secondnav ul li {
        float:left
    }

    #secondnav {
      width:100%;
    }
}

编辑：在您的特定示例中，容器#secondnav具有有限的宽度，因此上述代码在您增加宽度之前将无效。

编辑2：您的菜单项仍将转到多行，因为我认为它们的宽度设置为301。尝试将其设置为auto或更少（例如100px）。此外，您还需要将背景颜色应用于容器（我猜是#secondnav），但这些都是样式考虑因素超出了本问题的范围。

Answer 2

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

如何将li列表从垂直方向更改为水平方向

2 个答案: