我希望在页面中央有一个徽标,然后在右边3个菜单项。我试图像下面这样做,但它不工作,徽标不在页面的中心。你知道怎么做吗?
HTML
<header class="container">
<div class="content-full main_header">
<div class="logo">
<a>LOGO</a>
</div>
<div class="menu">
<ul class="main_nav">
<li><a href="">Item 1</a></li>
<li><a href=""><i class="fa fa-sign-in" aria-hidden="true"></i> Item 2</a></li>
<li><a href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Item 3</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>
CSS
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.container {
float: left;
width: 100%;
}
.content-full {
width: 100%;
}
.main_header {
border-bottom: 1px solid #d2d6df;
color:$color-white;
height: 60px;
float: left;
background-color: red;
text-align: center;
}
.logo{
line-height: 60px;
text-align: center;
background-color: yellow;
display: inline;
}
.menu{
display: inline;
background-color: blue;
text-align: right;
float: right;
}
.main_nav li {
float: left;
line-height: 60px;
text-transform: uppercase;
border-left: 1px solid #EFF2F5;
padding-left: 20px;
padding-right: 20px;
font-size: 0.8em;
letter-spacing: 0.5px;
border-radius: 0px;
}
.main_nav a {
color: gray;
}
.main_nav .create{
color:green;
}
.main_nav .create:hover{
color:green;
}
答案 0 :(得分:0)
添加菜单:
.menu{
position: relative;
top: -60px;
}
对于DOM:
<header class="container">
<div class="content-full main_header">
<div class="logo">
<a>LOGO</a>
</div>
</div>
<div class="menu">
<ul class="main_nav">
<li><a href="">Item 1</a></li>
<li><a href=""><i class="fa fa-sign-in" aria-hidden="true"></i> Item 2</a></li>
<li><a href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Item 3</a></li>
</ul>
</div>
</header>