我怎样才能把我的搜索框和导航栏放在同一行？

Question

我试图让我的搜索框与“家、关于、联系...”内容在同一行，但它似乎不起作用，我想我的 CSS 就是不行足以做到这一点，任何人都可以帮助我让他们站在同一条线上吗？非常感谢！

这是css:

.container{

    background-color: #A3318A;
}

.container ul{
    display: inline block;

}

.container ul li {
    
    display: inline;
    padding:15px;
    font-size: 1.5rem;
    color: white;

}

这是我的 html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet"  href="style.css">
    <script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>

    <div class="container">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>News</li>
            <li>Contact</li>
        </ul>
        <form>
            <input class="input" type="text" placeholder="Search here...">
            <i class="fas fa-search"></i>
        </form>
    </div>

</body>
</html>

Answer 1

用display: inline-block制作form:

.container form, /* added */
.container ul{
  display: inline-block; /* fixed */
}

我怎样才能把我的搜索框和导航栏放在同一行？

How can i put my searchbox and navbar at the same line?

css

navbar