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

你这样添加CSS

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用：

li, form { display: inline; }

html表单在导航栏中提交

2 个答案: