html 在导航栏中提交表单

Question

需要关于 html 的建议，因为我不是这方面的专家。
我需要在网页顶部的导航栏上显示以下表单按钮，但它们位于不同的行中。我希望它具有响应性，因此对于较小的屏幕，它们会在不同的行上进行调整，但如果有足够的区域，则应在导航栏上显示在一行中。尝试了几次 css 但没能成功。建议....

<body class="body">     
    <header>
            <nav>
                <ul>
                    <li><form action="/create" ><button type="submit">Create</button></form></li>
                    <li><form action="/update" ><button type="submit">Update</button></form></li>
                    <li><form action="/delete" ><button type="submit">Delete</button></form></li>

                </ul>
            </nav>
    </header>
    <div>
    </div>
</body>

Answer 1

您可以使用：

li, form { display: inline; }

Answer 2

你这样添加CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

<body class="body">     
    <header>
            <nav>
                <ul>
                    <li><form action="/create" ><button type="submit">Create</button></form></li>
                    <li><form action="/update" ><button type="submit">Update</button></form></li>
                    <li><form action="/delete" ><button type="submit">Delete</button></form></li>

                </ul>
            </nav>
    </header>
    <div>
    </div>
</body>

html 在导航栏中提交表单

html form submit in navigation bar

html

forms

navbar