CSS导航栏问题

Posted 2023-04-13

【中文标题】CSS导航栏问题

【英文标题】：CSS Navigation bar problems

【发布时间】：2020-08-17 15:41:04

【问题描述】：

css codehtml codeproblem I'm having我一直在尝试修复我的 html/css 代码以使“注销”按钮与搜索栏、图标和其余部分并排显示导航栏元素。如果我将其设为锚标记，则它非常适合，但因为我需要它在表单中，所以我需要它是提交按钮类型。唯一可行的方法是给它一个负的上边距，这并不理想，因为您压缩页面的次数越多，按钮的位置就越高。我不知道如何解决这个问题，迫切需要一些帮助。

【问题讨论】：

请发布问题的工作示例，没有示例将很难获得帮助

请发布相关代码以重现问题。

我已经发布了负责该问题的 html/php 和 css 代码。似乎出于某种原因，注销按钮的位置固定在其余按钮下方。

【参考方案1】：

将 nav/chid 元素的显示弹性设置为并排。

.navbar  
     display: flex;

<div class="navbar">
    <a href="#">Link</a>
    <form action="#" class="navbar">
        <input type="text">
        <button>Button</button>
    </form>
</div>