专注于输入会导致其他li元素垂直对齐变得混乱

Question

我有一个带li元素的导航。一个li元素包含一个表单。当我单击表单或表单的提交按钮时，所有内容的对齐都会搞砸。我将在下面发布代码和图片。

<div class="navbar">
<ul>
    <?php

    if (!empty($_SESSION['userid'])) {
        ?>
        <li class="search_dreams">
            <form>
                <input type="search" placeholder="Search Dreams...">
                <input type="image" src="images/buttons/search.png">
            </form>
            <div class="results" style="display:none">
                <ul>

                </ul>
            </div>
        </li>
        <?php
    }

    ?>

    <li><a href="google.com">Test</a></li>
    <li><a href="google.com">Test</a></li>
    <li><a href="google.com">Test</a></li>
    <li><a href="google.com">Test</a></li>

</ul>

CSS

/* Nav */
div.navbar {
    background-color: rgb(20, 150, 220);
    height: 50px;
    width: 100vw;
    border-bottom: 1px solid rgb(20, 50, 200);

    position: fixed;
    z-index: 1000;
}

div.navbar ul {

    padding: 0 20px;
    text-align: center;
    max-height: 50px;
    overflow: hidden;
}

div.navbar ul li {
    margin: 0 50px;
    display: inline-block;

    background-color: red;
}

div.navbar ul li a {
    text-decoration: none;
    line-height: 50px;
}

div.navbar ul li a:hover {
    background-color: rgb(15, 120, 180);
}

div.navbar ul li.login form input {
    width: 200px;
    height: 30px;
    font-size: 20px;
    text-indent: 5px;
    border-radius: 3px;
}

div.navbar ul li.login form input[type=submit] {
    font-size: 19px;
    background-color: rgb(240, 180, 40) !important;
    color: white;
    border-radius: 2px;
    height: 30px;
    width: 75px;
}

div.navbar ul li.logout form input {
    background-color: rgb(0, 200, 255);
    font-size: 19px;
    color: white;
    border-radius: 2px;
    height: 30px;
    width: 80px;
}

div.navbar ul li.search_dreams form input[type=search] { /* Search Dream Text Input */
    width: 500px;
    height: 40px;
    text-indent: 10px;
    font-size: 15px;
    outline: none;
    border: none;
}

div.navbar ul li.search_dreams form input[type=image] { /* Search Dream Button */
    float: right;
    width: 75px;
    height: 40px;
}

没有专注于搜索领域

专注于搜索领域

Answer 1

设置溢出：隐藏在ul中导致此行为。不完全确定为什么。