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

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

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

Answer 2

下面提出的是 "mobile-first" 方法。基本上，您首先按照元素在最小屏幕上的外观设置元素样式，然后随着屏幕宽度的增加逐渐调整样式，如下例所示。

为了让元素内联，你可以使用 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），但这些是超出此问题范围的样式考虑因素。

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

how to change li list from veritcal orientation to horizontal orientation

html

css

list

adaptive-design