0

Как "прибить" блок поиска к правому краю ul и выровнять его по вертикали? А в "схлопнутом" варианте сделать его под остальными li.

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
ul.topnav {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
  margin-left: 5%;
  margin-right: 5%;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: rgb(91, 91, 91);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.Shape_1 {
  margin-top: 3%;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(205, 205, 205);
  background-color: rgb(255, 255, 255);
  opacity: 0.38;
  width: 259px;
  height: 29px;
  z-index: 11;
}
<ul class="topnav" id="myTopnav">
	<li><a class="active" href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
	<li class="icon">
    		<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  	</li>
  	<li>
  		<div class="Shape_1"> поиск				
  		</div>
  	</li>
</ul>	

1 ответ 1

1

Для соответственного li

li {
    float: right;
    margin-right: 1%;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.