我需要一个简单的 css 导航栏代码

Question

我只需要一个简单的导航栏，CSS。

我使用了 div 这样我就可以组织我的代码，而且我坚持让右 div 在右边，左 div 在左边。

谁能帮帮我？

<div class="nav">
            <div class="navleft">
                <span>All jobs</span>
                <span><input type="button" value="change jobs" id="btn"></span>
            </div>
            <div class="navright">
                <select>
                    <option>All Time</option>
                    <option>this time</option>
                    <option>everytime</option>
                </select>
            </div> 
        </div>

Answer 1

你可以使用这个CSS代码，它可以解决问题

.nav{
  display:flex;
}
.navright{
  margin-left:auto
}

Answer 2

很简单，您可以将以下代码添加到您的 .nav 分类 <div>

然后您可以在 css 文件中使用此样式

.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}

这应该会给你想要的结果。我还在导航中添加了一些填充，这样项目就不会粘在边缘了。

如果您也有兴趣改进您的代码，我建议您更改 HTML 以更好地适应您正在使用的每个元素的作用。这是您如何更改它的示例

<nav>
  <ul class="navleft">
    <li>All jobs</li>
    <li><input type="button" value="change jobs" id="btn"></li>
  </ul>
  <ul class="navright">
    <select>
      <option>All Time</option>
      <option>this time</option>
      <option>everytime</option>
    </select>
  </ul>
</nav>

我需要一个简单的 css 导航栏代码

I need a simple css code for navigation bar

html

css

nav

navbar