无法在导航栏中向右浮动我的输入区域 - 为什么？

Question

我无法找到一种方法使我的输入字段（搜索框）及其相关图标（放大镜）位于我网站导航栏右侧的float（同时离开我的导航左侧的徽标）。有什么建议吗？

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

有多种方法可以做到。

flexbox

grid

注意：

由于代码段中的 space 限制，您必须在 full screen 中查看它。

I just used position:absolute; this will move your content towards right.

You can have a wrapper around those 2 input and use flex to keep those 2 items towards right.

Don't use float it has become old and it not very much flexible when you have your responsive design.

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

在表单上使用 margin-left: auto; 而不是 float: right - 它位于弹性容器内 (.nav-container)，其中浮动无效，但 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 3

缺少这个

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

无法在导航栏中向右浮动我的输入区域 - 为什么？

No way to float right my input area in the nav bar - Why?

html

css

input

css-float

flexbox