Navbar li 调整大小后转到下一行

Posted 2023-03-06

【中文标题】Navbar li 调整大小后转到下一行

【英文标题】：Navbar li goes to next line upon resize

【发布时间】：2015-06-25 00:37:55

【问题描述】：

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

这是导航栏的 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%;

【问题讨论】：

jsfiddle.net/jryfd3b2 你在找什么？

它似乎在 jsfiddle 中工作，但我没有看到你改变了什么。

【参考方案1】：

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

我说隐藏是因为在执行您的代码后，“注销”元素不会低于其他导航元素，它只是完全隐藏。 （使用 Safari）。 删除“最小宽度”为我解决了这个问题。希望它也适合你。

【讨论】：

嗯，我尝试删除最小宽度，但它似乎并没有改变这种行为。我正在使用铬。

【参考方案2】：

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

/* Navbar */

.navbar 
    background: #DDDDDD;
    overflow: hidden;
    width: 100%;


.navbar ul 
    border: solid 1px #BBBBBB;
    margin: 0;
    min-width: 600px;