再见！我在网站顶部有一个导航栏，只有两个元素：菜单图标和品牌徽标（Eiffeltower）。想法是将Eiffeltower图像放置在导航栏的中心，并将菜单图标放在导航栏的最左侧（在withe区域），但是我在将其正确放置在CSS中时遇到了一些麻烦。
text-align: center似乎不起作用，因此我设置了一些padding命令，但是我认为这不是一个很好的解决方案。而且我不知道如何将其放置fa fa-bar在左侧。我需要协助！你可以看看吗？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
<title>Untitled Document</title>
<style>
.nav {
list-style:none;
margin:0 8%;
padding:0;
position:relative;
text-align:center;
background: rgb(51,51,51);
color:rgb(51,51,51);
font-size:140%;
padding:0px 10px;
font-family:Arial, Helvetica, sans-serif;
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
}
.nav li {
position:relative;
z-index:2;
display:inline-block;
vertical-align:bottom;
text-transform:uppercase;
}
.nav a, .nav span {
display:block;
color:#fff;
text-decoration:none;
margin:0 20px;
padding-right: 80px;
}
.nav a:visited{
color:rgb(51,51,51)
}
.nav:after{
content:"";
position:absolute;
top:0;
bottom:50%;
right:0;
left:0;
background: rgb(51,51,51);
}
.nav span{
width:186px;
height:77px;
background:rgba(255,255,255, 0.3);
font-size:77px;
overflow:hidden;
}
.nav #brand {
height: 160px;
width: 80px;
position: absolute;
}
.nav #fafa {
font-size: 30px;
color: rgb(42, 186, 214);
}
</style>
</head>
<body>
<ul class="nav center">
<li><i id="fafa" class="fa fa-bars"></i></li>
<li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"></span></li>
</ul>
</body>
</html>您可以float: left在li包含菜单的图标上使用，如下所示：
http://jsfiddle.net/swm53ran/322/
<ul class="nav center">
<li class="menubar"><i id="fafa" class="fa fa-bars"></i></li>
<li class="logo"><span><img id="brand" alt="Brand" src="https://photos-3.dropbox.com/t/2/AACJhIINsVBRwEqcMxgWNfqZu5OrjdJRMjG46W7GeV_ttw/12/5046553/jpeg/32x32/1/_/1/2/Eiffeltoren-logo.jpg/EOzL4wMYgEUgASgB/M6Hyu4cmSoxBTnl8a18nWaMYKaQpYmF2AznL32KgdT0?size=1024x768&size_mode=2"/></span></li>
</ul>
.nav .menubar {
float: left;
}
更新：菜单在白色区域：http : //jsfiddle.net/swm53ran/325/
margin-left: -55px;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句