1

我有一个页面，我正在使用自适应移动设计。现在，我已经确定了主要导航，但我有第二个导航，如下所示：

<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 - 只是缩小它的宽度，看看我在说什么。

谢谢！

4

2 回答 2

4

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

为了让元素内联，您可以使用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。尝试将其设置为自动或更少（如 100 像素）。此外，您还需要为容器应用背景颜色（我猜是#secondnav），但这些是超出此问题范围的样式考虑。

于 2015-01-24T18:26:32.293 回答
0 
<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;
}
于 2015-01-24T18:25:12.223 回答