Question

侨！我在网站顶部有一个导航栏，只有两个元素：菜单图标和品牌标识（Eiffeltower）。我的想法是将Eiffeltower图像放在导航栏的中心，并将导航栏的最左侧（在区域中）的菜单图标放置，但是我在将它正确放入CSS时遇到了一些麻烦。 / p>

text-align: center似乎没有用，所以我设置了一些padding命令，但我不认为这是一个很好的解决方案。我无法弄清楚如何将fa fa-bar放在左边。我需要一些帮助！你能看看吗？

Codepen

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

Answer 1

您可以在包含菜单图标的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;

Answer 2

你可以采取两种方式。使用float属性，如：

float: left;

或者，您可以设置position: absolute;，然后像这样使用left属性：

left: 10px;

您可以在this链接中找到有关如何在CSS中水平对齐元素的更多信息。

对齐导航栏中的项目

2 个答案: