主页 / 问题 / 861933
Accepted
Nulliza
Asked:2020-07-30 15:44:15 +0000 UTC2020-07-30 15:44:15 +0000 UTC

如何布置导航栏的这一部分？它不是标题

  • 772

问题是我不明白如何将“博客”与其他菜单按钮放在同一级别。我提前为菜鸟问题道歉。

在此处输入图像描述

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>

html

2 个回答

  1. 作为一种选择：

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

    • 0
  2. Best Answer

    弯曲

    * {
  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

相关问题