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

【问题标题】：how to change li list from veritcal orientation to horizontal orientation如何将 li 列表从垂直方向更改为水平方向
【发布时间】：2015-03-23 14:28:36
【问题描述】：

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

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

谢谢！

【问题讨论】：

这里有一支笔供您试用，演示基于内联和浮动媒体查询的答案。我用400px作为断点codepen.io/henry/pen/gbRXRg?editors=110

标签： html css list adaptive-design

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：