0
Я искал вокруг, и я не нашел ответов для своего конкретного случая. Я хочу, чтобы форма поиска была выровнена справа от страницы, но для нее всегда была выровнена с разделом, в котором он находится. Я прибегал к абсолютному позиционированию, но я бы скорее нашел более чистый способ сделать это со мной приходится постоянно менять значение стиля "Top:;"Элемент сохраняет Оставшееся 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="#">☰</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">🔍</span>
</button>
</form>
</nav>
Я не понял вашу проблему, вы можете объяснить лучше ?. , , возможно, отправьте фотографию того, что вы хотите сделать. – alexqoliveira
Знаете ли ... Я был в середине видео, чтобы показать вам свою проблему, когда у меня было прозрение. Поэтому я когда и работал над своим кодом и менял пару вещей, и он работает так, как я себе это представлял. Ошибка заключалась в том, что я делал абсолютное значение ** top ** и ** right **, когда все, что мне было нужно, было абсолютным значением для ** right **. '@media screen и (max-width: 960px) { \t. Search-form { \t \t дисплей: встроенный блок; \t \t Право: 5%; \t \t позиция: абсолютная; \t} \t.search-form { \t \t float: слева; \t} } ' –