导航栏 li 在调整大小后转到下一行

Question

我的网站上有一个导航栏，它由一个ul和一些li组成。最后一个li 注销 必须右对齐。问题是，当屏幕调整得太小时，它会转到下面的一行以防止遇到其他li。

下面是导航栏的 HTML：

<div class="navbar">
<ul>
    <li><a href="index.php">Home</a></li>
    <?php if ($user->logged_in) { ?>
        <li><a href="page1.php">Page 1</a></li>
        <li><a href="page2.php">Page 2</a></li>
        <li><a href="page3.php">Page 3</a></li>
        <li style="margin-right: 10px; float: right;"><a href="log_out.php">Log Out</a></li>
    <?php } ?>
</ul>

和 CSS：

/* Navbar */
.navbar {
    background: #DDDDDD;
    overflow: hidden;
    width: 100%;
}
.navbar ul {
    border: solid 1px #BBBBBB;
    margin: 0;
    min-width: 600px;
    overflow: hidden;
}
.navbar ul li {
    border: solid transparent;
    border-width: 0 1px 0 1px;
    cursor: pointer;
    display: inline-block;
    float: left;
    padding: 16px;
}
.navbar ul li:hover {
    background-image: url("../images/patterns/background.png");
    border-color: #369643;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    color: #FFFFFF;
    text-shadow: 0 1px 0 #167F39;
}
.navbar ul li a {
    color: inherit;
    display: block;
    text-decoration: none;
    width: 100%;
}

Answer 1

你的问题不太清楚，但我假设你不希望"注销"元素低于其他导航元素。问题出在您的 css 中，您将"最小宽度"设置为"导航栏 ul"元素。因此，当屏幕减小到该宽度以下时，它将被隐藏。

我说隐藏是因为在执行代码后，"logout"元素不会低于其他导航元素，它只是完全隐藏。（使用 Safari）。删除"最小宽度"为我解决了这个问题。希望它也能为你服务。

Answer 2

它在jsfiddle和本地浏览器中运行良好。已添加溢出。

/* Navbar */
.navbar {
    background: #DDDDDD;
    overflow: hidden;
    width: 100%;
}
.navbar ul {
    border: solid 1px #BBBBBB;
    margin: 0;
    min-width: 600px;
   }