Ayuda en la programación, respuestas a preguntas / Css / Consulta de medios de Css: el estilo predeterminado no se aplica cuando la condición falla - css

Consulta de medios de Css: el estilo predeterminado no se aplica cuando la condición falla - css

Tengo consulta de medios para el ancho máximo, así que cuando elusuario cambiar el tamaño del navegador, el diseño será sensible. El problema es que cuando el usuario vuelve al tamaño original del navegador, el diseño se dejó un poco desordenado, no vuelve a la posición inicial. Cuando recargo la página, todo está bien. Pensé que no hay reglas de consulta de medios. se debe aplicar cuando no se cumple la condición y solo se debe aplicar css predeterminado?

Antes de redimensionar:

antes de redimensionar

Cuando se redimensiona:

después de cambiar el tamaño

Después de cambiar el tamaño de nuevo:

.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;
}

}

EDITAR: demo jsfiddle añadida MANIFESTACIÓN: https://jsfiddle.net/qtenuuhv/

Respuestas

1 para la respuesta № 1

Probé esto en un par de navegadores y parece que solo afecta a Chrome. Parece que no le gusta la mezcla de display: inline-block; en .nav-main-link y float: right; en #nav-main-search.

Para arreglarlo puedes simplemente flotar .nav-main-link a la izquierda en lugar de usar inline-block:

Añadir float: left; a .nav-main-link
retirar display: inline-block; de .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/