1

Проблема в том, что я не понимаю как "Блог" разместить на одном уровне с остальными кнопками меню. Заранее прошу прощения за нубский вопрос.

введите сюда описание изображения

html {
  	font-size: 10px;
}
body {
	background-color: #f2f2f2;
    font-family: 'Futura PT'; /* Гарнитура шрифта */
    src: url(../fonts/Futura PT.ttf); /* Путь к файлу со шрифтом */
}
*{
	padding: 0;
	margin: 0;
}
ul{
	display: flex;
}   
a{
	text-decoration: none;
}
header{
	height: 53px;
	background: #ffffff;
	padding: 10px 200px;
}


.top-slide{
	background: #ffffff;
}
.menu-container{
	height: 57px;
	width: 1366px;
	margin: 0 auto;
	display: flex;
	justify-content: baseline;
}
.menu-container a{
 	color: #686868;
 	font-size: 16px;
 	margin-right: 20px;
 	padding: 24px 40px 14px 40px;
}
/*стилизация кнопок верхнего меню*/
.menu-container a:hover{
	background: #eeeeee;
	/*padding: 25px 30px;*/
	height: 10px;
	width: 90px;
}
#menu-checkbox{
	display: none;
}
<main>
		<section class="top-slide">
			<div><h2>Блог</h2></div>
            <div class="menu-container">
			<input type="checkbox" id="menu-checkbox">
			<nav rove="navigation">
				<label for="menu-checkbox" class="toggle-button" 
				 data-open="Menu" data-close="Close" onclick></label>
			 	<ul class="main-menu">
			 		<li><a href="#">Для бізнесу</a></li>
			 		<li><a href="#">Для Юристів</a></li>
			 		<li><a href="#">Підписатися на розсилку</a></li>
				</ul>
			</nav>
		</div>
		</section>	
	</main>

2 ответа 2

0

флексы

* {
  margin: 0; 
  padding: 0;
}
body {
  font-family: sans-serif;
}
nav {
  display:flex;
  border-bottom:1px solid #ccc;
}
nav .nav-title {
  color:#222;
  font-weight: bold;
  padding: 10px;
}
nav .navigation {
  list-style: none;
  display:flex;
  color: gray;
  flex-grow:1;
}
nav .navigation li {
    padding: 10px;
}
nav .navigation li.selectable:hover {
    box-shadow:0 -1px 0 0 #3AE2CE inset;
}
nav .navigation li.left {
    flex-grow:1;
    text-align:right;
}
<nav>
  <div class="nav-title">Блог</div>
  <ul class="navigation">
    <li class="selectable">Для бизнеса</li>
    <li class="selectable">Для юристов</li>
    <li class="left">Подписатся на рассылку</li>
  </ul>
</nav>

0
0

Как вариант:

.header-top {
   height:40px;
    background: #efefef;
    line-height:40px;
}
.header-nav {
    height: 40px;
    background: #ccc;
    line-height:40px;
}
.header-nav .name {
    float: left;
    width: 80px;
    display:block
}
.header-nav ul {
    float:left;
    display:block;
    margin:0px;
}
.header-nav ul li {
    float: left;
    list-style:none;
    margin-right:20px;
    display:block;
}
.header-nav ul li a{
    text-decoration:none;
}
.header-nav ul li.active {
    border-bottom:2px solid blue;
}
.clr {
    clear:both;
}
<div class="header-top">
    Header top
</div>
<div class="header-nav">
    <div class="name">Блог</div>
    <ul>
        <li class="active"><a href="#">Для бизнеса</a></li>
        <li><a href="#">Для Юристов</a></li>
    </ul>
    <div class="clr"></div>
</div>

Ваш ответ

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

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