无法在导航栏中浮动我的输入区--为什么？[重复]

Question

这个问题在这里已经有了答案:

在CSS Flexbox中，为什么没有 "justify-items "和 "justify-self "属性？ (5个答案)

封闭 上月.

我找不到一种方法让我的输入框（搜索框）和它的相关图标（放大镜）成为 float 在我的网站的导航条右边（而把我的标志留在导航条的左边）。有什么建议吗？

HTML: HTML:

 <nav>
        <div class="nav-container">
            <div class="logo">
                <a href="">
                    <h1>MyWebsiteName.com</h1>
                </a>
            </div>
            <form action="javascript:redirect()" autocomplete="off">
                <input type="search" name="search" id="search" class="form-control">
                <ul class=mylist list-group" id="result"></ul>  <!--this line is for JS-->
                <button type="submit">
                   <svg width="50" height="50" viewBox="0 0 77 77" fill="none" 
                           xmlns="http://www.w3.org/2000/svg">
                   </svg> </button>
            </form>

        </div>
</nav>

CSS。

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0;
  position: relative;
}
.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4; 
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}
form {
  float: right;
}

Answer 1

使用 margin-left: auto; 在表格上而不是 float: right - 它在一个柔性容器内(.nav-container)，其中float不会有效，而 margin-left: auto 会将其尽量向右移动。

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  position: relative;
}

.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4;
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}

form {
  margin-left: auto;
}

<nav>
  <div class="nav-container">
    <div class="logo">
      <a href="">
        <h1>MyWebsiteName.com</h1>
      </a>
    </div>
    <form action="javascript:redirect()" autocomplete="off">
      <input type="search" name="search" id="search" class="form-control">
      <ul class=mylist list-group " id="result "></ul>     <!-- this line is for JS -->
                <button type="submit ">
                   <svg width="50 " height="50 " viewBox="0 0 77 77 " fill="none " 
                           xmlns="http://www.w3.org/2000/svg ">
                   </svg> </button>
            </form>

        </div>
</nav>

Answer 2

有多种方法可以做到这一点。

flexbox

网格

注意。

由于代码段中的空间限制，您必须在 full screen.

1. 我只是用 position:absolute; 这将使你的内容走向 right.
2. 你可以对这两个输入进行封装，并使用 flex 以保持这2个项目向右。
3. 不要使用 float 它已经变得老旧，当你有你的响应式设计时，它不是很灵活。

.nav-container {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  position: relative;
}

.nav-container form {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav input {
  font-size: 1.20em;
  border: solid 2px #E5E5E5;
  border-radius: 25px;
  background: none;
  color: #F4F4F4;
  padding: 14px;
  margin: 0 20px 0 0;
  width: 260px;
}

.moveRight {
  position: absolute;
  right: 10px;
}

<nav>
  <div class="nav-container">
    <div class="logo">
      <a href="">
        <h1>MyWebsiteName.com</h1>
      </a>
    </div>
    <form action="javascript:redirect()" autocomplete="off" class="moveRight">
      <input type="search" name="search" id="search" class="form-control">
      <ul class="mylist list-group" id="result"></ul>
      <!-- this line is for JS -->
      <button type="submit">
                   <svg width="50" height="50" viewBox="0 0 77 77" fill="none" 
                           xmlns="http://www.w3.org/2000/svg">
                   </svg> </button>
    </form>

  </div>
</nav>

Answer 3

缺少这个

.nav-container {
justify-content: space-between;
}