Помощ при програмиране, отговори на въпроси / Css / Css media query - стилът по подразбиране не се прилага, когато условието се провали - css

Css media query - стилът по подразбиране не се прилага, когато условието се провали - css

Имам медийна заявка за max-width, така че когатопотребител промени размера на браузъра, дизайнът ще бъде отзивчив. Проблемът е, че когато потребителят се върне към първоначалния размер на браузъра, дизайнът ще остане малко объркан, няма да се върне в първоначалната позиция. Когато презаредим страницата, всичко е наред. Мислех, че няма правила за медийни заявки. трябва да се прилага, когато условието не е изпълнено и трябва да се приложи само css по подразбиране?

Преди преоразмеряване:

преди преоразмеряване

При преоразмеряване:

след преоразмеряване

След преоразмеряване: след преоразмеряване обратно

.nav-main-link {
display: inline-block;
border-right: 1px solid black;
min-height: 50px;
}

#nav-main-search {
float: right;
margin-top: 10px;
margin-right: 10px;
}

#nav-main-search .search-input {
border-radius: 5px 0px 0px 5px;
width: 225px;
font-size: 1.0em;
box-sizing: border-box;
padding: 2px 0px 0px 10px;
height: 2em;
}

@media (max-width: 600px) {

.nav-main-link {
display: block;
border-bottom: 1px solid white;
border-right: 0;
}

#nav-main-search {
float: none;
position: relative;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 50px;
}

#nav-main-search .search-input {
display: block;
width: 100%;
}

#nav-main-search button[type="submit"]{
position: absolute;
top: 0px;
right: 0px;
}

}

EDIT: добавя jsfiddle демо ДЕМОНСТРАЦИЯ: https://jsfiddle.net/qtenuuhv/

Отговори:

1 за отговор № 1

Това е тествано в няколко браузъра и изглежда само за Chrome. Изглежда, че не харесва смесицата display: inline-block; за .nav-main-link и float: right; за #nav-main-search.

За да поправите, можете просто да плавате .nav-main-link вляво, вместо да се използва inline-block:

Добави float: left; да се .nav-main-link
Премахване display: inline-block; от .nav-main-link

* {
border: 0;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
body {
font-family: Arial, Sans-Serif;
font-size: 0.9em;
}
#main {
min-width: 300px;
max-width: 900px;
margin: 0 auto;
padding: 10px 20px 0 20px;
}
#nav-main {
background: #936ac9;
background: -moz-linear-gradient(top, #936ac9 0%, #8745bc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #936ac9), color-stop(100%, #8745bc));
background: -webkit-linear-gradient(top, #936ac9 0%, #8745bc 100%);
background: -o-linear-gradient(top, #936ac9 0%, #8745bc 100%);
background: -ms-linear-gradient(top, #936ac9 0%, #8745bc 100%);
background: linear-gradient(to bottom, #936ac9 0%, #8745bc 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#936ac9", endColorstr="#8745bc", GradientType=0);
min-height: 50px;
overflow: hidden;
border-radius: 10px;
}
#nav-main a {
color: white;
}
#nav-main-search {
float: right;
margin-top: 10px;
margin-right: 10px;
}
#nav-main-search .search-input {
border-radius: 5px 0px 0px 5px;
width: 225px;
font-size: 1.0em;
box-sizing: border-box;
padding: 2px 0px 0px 10px;
height: 2em;
}
.nav-main-link {
float: left; /*Add this*/
/*display: inline-block; Remove this*/
border-right: 1px solid black;
min-height: 50px;
}
.nav-main-link a {
display: block;
font-size: 1.3em;
padding: 12px 10px;
border-right: 1px solid white;
min-height: 50px;
box-sizing: border-box;
}
#nav-main-search button[type="submit"] {
width: 50px;
background-color: gray;
font-size: 1.0em;
display: block;
color: black;
float: right;
border-radius: 0px 5px 5px 0px;
overflow: hidden;
cursor: pointer;
height: 2.0em;
}
@media (max-width: 600px) {
.nav-main-link {
float: none; /*Add this*/
display: block;
border-bottom: 1px solid white;
border-right: 0;
}
#nav-main-search {
float: none;
position: relative;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 50px;
}
#nav-main-search .search-input {
display: block;
width: 100%;
}
#nav-main-search button[type="submit"] {
position: absolute;
top: 0px;
right: 0px;
}
}

<div id="main">
<nav>
<ul id="nav-main">
<li class="nav-main-link"><a href="#">Novinky</a>
</li>
<li class="nav-main-link"><a href="#">Kontakt</a>
</li>
<li class="nav-main-link"><a href="#">Kariéra</a>
</li>
<li id="nav-main-search">
<form method="post" enctype="application/x-www-form-urlencoded" action="#">
<input placeholder="hledat..." class="search-input" type="text" />
<button type="submit" value="vyhledat"><i class="fa fa-search"></i>
</button>
</form>
</li>
</ul>
</nav>
</div>

JS Fiddle: https://jsfiddle.net/q9r6xgyL/