javascript - 元素在调整大小时不断离开 Div

Question

我一直在四处寻找，但没有找到适合我的特定案例的任何答案。我想让搜索表单与页面右侧对齐，但它始终与它所在的 div 对齐。我已经求助于绝对定位，但我更愿意找到一种更简洁的方法来完成此操作必须不断更改样式“Top: ;”

的值

这是代码的链接:https://jsfiddle.net/nz4u376r/

这是一个片段:

CSS:

/*----- Toggle Button -----*/

.toggle-nav {
  display: none;
}
.toggle-nav-button {
  color: #FFF;
  padding: 12px;
  transition: color 0.3s ease;
  max-width: 45px;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.toggle-nav-button:hover {
  color: #0d2c87;
  background-color: #909f8e;
  -webkit-transition: background .4s ease;
  -moz-transition: background .4s ease;
  -ms-transition: background .4s ease;
  -o-transition: background .4s ease;
  transition: background .4s ease;
}
@media screen and (max-width: 970px) {
  .toggle-nav {
    float: left;
    display: inline-block;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    color: #FFF;
    font-size: 18px;
    text-decoration: none;
  }
  .active {
    display: none;
  }
}
/*-- Toggle Button End --*/

/*---- Main Nav CSS ----*/

/*Colors:  #0d2c87 #7E8F7C  | http://www.hexcolortool.com/7E8F7C#909f8e | */

.menu {
  background-color: #7E8F7C;
  height: 48px;
  width: 100%;
}
nav ul {
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
nav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 190px;
  width: 100%;
}
nav a {
  background: #7E8F7C;
  color: #FFF;
  display: block;
  font: 16px/48px sans-serif;
  text-align: center;
  text-decoration: none;
}
.header-li:hover {
  background: #909f8e;
  color: #0d2c87;
  -webkit-transition: background .4s ease;
  -moz-transition: background .4s ease;
  -ms-transition: background .4s ease;
  -o-transition: background .4s ease;
  transition: background .4s ease;
}
nav li ul li:hover a {
  background: #909f8e;
  color: #0d2c87;
  -webkit-transition: background .4s ease;
  -moz-transition: background .4s ease;
  -ms-transition: background .4s ease;
  -o-transition: background .4s ease;
  transition: background .4s ease;
}
nav li ul {
  float: left;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 35px;
  visibility: hidden;
  z-index: 11;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}
nav li:hover ul {
  opacity: 1;
  top: 48px;
  visibility: visible;
}
nav li ul li {
  float: none;
}
nav li ul a:hover {
  background: #909f8e;
}
/*-- Main Nav CSS End --*/

/*--- Nav SearchBar ---*/

.search-form {
  display: inline-block;
  position: relative;
  margin-top: 8px;
  margin-right: 8px;
  float: right;
}
.search-form input {
  width: 200px;
  height: 30px;
  padding: 0px 8px;
  font-size: 13px;
  float: left;
}
.search-form input:hover,
input:focus {
  border-top: 1px ridge #3292E0;
  border-bottom: 1px ridge #3292E0;
  border-left: 1px ridge #3292E0;
}
.search-form button {
  height: 30px;
  /*#66a992 #0d2c87 */
  color: #FFF;
  border: none;
  padding: 5px;
  background-color: #0d2c87;
}
.search-form button:hover {
  opacity: 0.8;
  -webkit-transition: opacity .4s ease;
  -moz-transition: opacity .4s ease;
  -ms-transition: opacity .4s ease;
  -o-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.search-from-drop {
  display: none;
}
@media screen and (max-width: 1250px) {
  .search-form input {
    width: 120px;
  }
  .active-search {
    display: none;
  }
  .search-from-drop {
    display: inline-block;
  }
}
@media screen and (max-width: 1125px) {
  .search-form {
    display: none;
  }
}
@media screen and (max-width: 840px) {
  .search-form {
    display: inline-block;
    right: 5%;
    position: absolute;
    top: 72px;
  }
  .search-form {
    float: left;
  }
}

<nav class="menu">
  <ul class="active">
    <li>
      <a class="header-li" href="">Home</a>
    </li>
    <li>
      <a class="header-li" href="">Our Company</a>
      <ul>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="header-li" href="">Services</a>
      <ul>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="header-li" href="">Products</a>
      <ul>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="header-li" href="">Resources</a>
      <ul>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
        <li><a href="">Blank</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class="toggle-nav">
    <li>
      <div class="toggle-nav-button" href="#">&#9776;</div>
      <ul>
        <li><a href="">Home</a>
        </li>
        <li><a href="">Our Company</a>
        </li>
        <li><a href="">Services</a>
        </li>
        <li><a href="">Products</a>
        </li>
        <li><a href="">Resources</a>
        </li>
      </ul>
    </li>
  </ul>
  <form class="search-form">
    <input type="text">
    <button><span class="active-search">Search</span><span class="search-from-drop">&#128269;</span>
    </button>
  </form>
</nav>

Answer 1

我发现了我的错误，我想我会回答我的问题。

错误是当我需要的只是right的绝对值时，我正在制作top和right的绝对值，所以改变后...

这个:

	.search-form {
		display: inline-block;
		right: 5%;
   		position: absolute;
    	top: 72px;
	}

进入这个:

	.search-form {
		display: inline-block;
		right: 5%;
   		position: absolute;
	}

一切正常。每次标题或导航栏的高度发生变化时，不再需要担心更改特定值。

感谢您的帮助!