Верстка блока меню и поиска

383

15 февраля 2017, 21:30

Помогите сверстать блок меню. не могу разобраться как сделать все в один ряд

Вот СSS-код и HTML-код

/*меню*/ 
.menu { 
	margin-top: 20px; 
	text-align: center; 
	max-width: 760px; 
	float: left; 
} 
 
.menu a { 
	text-transform: uppercase; 
	text-decoration: none; 
	color: #717171; 
	display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */ 
    padding: 10px 13px; 
	background-color: #DDDDDD; 
 
} 
 
.menu .active { 
	color: #fff; 
	background-color: #D45757; 
} 
 
.menu ul { 
	/* 
	font-size: 0; 
	*/ 
} 
 
.menu li { 
	display: inline-block; 
	font-family: Open Sans, sans-serif; 
	font-size: 14px; 
	height: 40px; 
} 
 
/*конец меню*/ 
 
/*поиск*/ 
 
#search-block-form { 
	margin-top: 20px; 
	margin-left: 0px; 
	text-align: center; 
	/* 
	max-width: 760px; 
	*/ 
	float: left; 
} 
 
#search-block-form{ 
	width:250px; 
	height:28px; 
	border:#c9c9c9 solid 1px; 
	background:url(images/searchBg.png) left top repeat-x; 
	box-shadow:0px 1px 0px rgba(255,255,255,0.1); 
	} 
.focus-active{ 
	border-color:#aaa !important; 
	background:#fff !important; 
	} 
#search-block-form input{ 
	padding:0; 
	margin:0; 
	display:block; 
	border:none; 
	outline:none; 
	background:none; 
	width:100%; 
	height:100%; 
	} 
#search-block-form .form-actions{ 
	width:58px; 
	height:28px; 
	float:right; 
	border:#a8b5b9 solid 1px; 
	margin:-1px -1px 0 0; 
	background:url(images/submit.png) left top repeat;	 
	} 
#search-block-form .form-actions input:hover{ 
	cursor:pointer; 
	} 
#search-block-form .form-actions input{ 
	overflow:hidden; 
	font:11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; 
	color:#a8b5b9; 
	} 
#search-block-form .form-item{ 
	width:157px; 
	padding:0 0 0 33px; 
	float:left; 
	height:28px; 
	background:url(images/searchIcon.png) 3px 2px no-repeat; 
	} 
#search-block-form .form-item input{ 
	font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; 
	color:#222; 
	height:auto !important; 
	padding:6px 0; 
	}

<nav class="menu"> 
			<ul> 
				<li><a href="#" class="active">Music</a></li> 
				<li><a href="#">Movies</a></li> 
				<li><a href="#">TV Series</a></li> 
				<li><a href="#">Education</a></li> 
				<li><a href="#">Lifestyle</a></li> 
				<li><a href="#">Fashion</a></li> 
				<li><a href="#">Health</a></li> 
				<li><a href="#">Photography</a></li> 
			</ul> 
			<form action="" method="post" id="search-block-form"> 
      			<div class="form-item"> 
        			<input type="text" name="" value="" maxlength="128" placeholder="SEARCH AWESOMAG"> 
	      		</div> 
	      		<div class="form-actions"> 
	       			<input type="submit" name="op" value="" class="form-submit"> 
	   			</div> 
			</form> 
		</nav>

Answer 1

* { 
  padding: 0; 
  margin: 0; 
} 
/*меню*/ 
 
.menu { 
  margin-top: 20px; 
  max-width: 760px; 
  display: flex; 
  font-size: 12px; 
} 
.menu a { 
  text-transform: uppercase; 
  text-decoration: none; 
  color: #717171; 
  display: block; 
  padding: 0 5px; 
  line-height: 30px; 
  background-color: #DDDDDD; 
} 
.menu .active { 
  color: #fff; 
  background-color: #D45757; 
} 
.menu ul { 
  flex: 4 0; 
} 
.menu li { 
  display: inline-block; 
  font-family: Open Sans, sans-serif; 
  font-size: 11px; 
} 
/*конец меню*/ 
 
/*поиск*/ 
 
#search-block-form { 
  display: flex; 
  flex: 1 0; 
  height: 28px; 
  border: #a8b5b9 solid 1px; 
  background: url(images/searchBg.png) left top repeat-x; 
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1); 
} 
.focus-active { 
  border-color: #aaa !important; 
  background: #fff !important; 
} 
#search-block-form input { 
  display: block; 
  border: none; 
  outline: none; 
  background: none; 
  width: 100%; 
} 
#search-block-form .form-item { 
  flex: 1 0; 
  height: 28px; 
  background: url(images/submit.png) left top repeat; 
} 
#search-block-form .form-actions input:hover { 
  cursor: pointer; 
} 
#search-block-form .form-actions input { 
  overflow: hidden; 
  font: 11px/16px"Trebuchet MS", Arial, Helvetica, sans-serif; 
  color: #a8b5b9; 
} 
#search-block-form .form-actions { 
  width: 28px; 
  height: 28px; 
  flex: 0 0 28px; 
  border-left: #a8b5b9 solid 1px; 
  background: url(images/searchIcon.png) 3px 2px no-repeat; 
} 
#search-block-form .form-item input { 
  font: 10px/28px"Trebuchet MS", Arial, Helvetica, sans-serif; 
  color: #222; 
  padding: 0 5px; 
}

<nav class="menu"> 
  <ul> 
    <li><a href="#" class="active">Music</a> 
    </li> 
    <li><a href="#">Movies</a> 
    </li> 
    <li><a href="#">TV Series</a> 
    </li> 
    <li><a href="#">Education</a> 
    </li> 
    <li><a href="#">Lifestyle</a> 
    </li> 
    <li><a href="#">Fashion</a> 
    </li> 
    <li><a href="#">Health</a> 
    </li> 
    <li><a href="#">Photography</a> 
    </li> 
  </ul> 
  <form action="" method="post" id="search-block-form"> 
    <div class="form-item"> 
      <input type="text" name="" value="" maxlength="128" placeholder="SEARCH AWESOMAG"> 
    </div> 
    <div class="form-actions"> 
      <input type="submit" name="op" value="" class="form-submit"> 
    </div> 
  </form> 
</nav>