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

你的问题不是很清楚，但我假设你不想要＃34;注销＆＃34;元素低于其他导航元素。问题在于你的css，你设置了一个＆＃34; min-width＆＃34;到你的导航栏＆＃39;元件。因此，当屏幕减小到低于该宽度时，它将被隐藏。

我说隐藏是因为在执行你的代码之后＆＃34; logout＆＃34;元素不会低于其他导航元素，它只是完全隐藏。（使用Safari）。删除＆＃39; min-width＆＃39;为我解决了这个问题。希望它也适合你。

Answer 2

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

/* Navbar */

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

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

Navbar li在调整大小时进入下一行

2 个答案: