调整后元素保持离开Div

时间：2016-01-07 15:56:52

标签： javascript html css html5 forms

我一直在四处寻找，但我没有找到任何答案。我想要一个与页面右侧对齐的搜索表单，但是它始终与它所在的div对齐。我已经采用了绝对定位，但我更愿意找到一个更清晰的方法来解决这个问题。必须不断改变风格“顶部：; ”

的价值

以下是代码的链接：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>

2 个答案:

答案 0 :(得分：0)

您可以尝试将表单放在外面导航标记：

    <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>
    </nav>
  <form class="search-form">
            <input type="text">
            <button><span class="active-search">Search</span><span class="search-from-drop">&#128269;</span></button>
        </form>

这样，表单元素始终位于导航下方。在您的情况下，表单的位置与其父级（导航）的顶部相关。这就是为什么你需要额外的造型来推动表格。让我知道它是否有效，如果这是你正在寻找的。

答案 1 :(得分：0)

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

错误是当我需要的是正确的绝对值时，我的绝对值是顶部和正确，所以改变后......

此：

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

进入这个：

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

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

感谢您的帮助！

相关问题
最新问题