在导航栏中对齐项目

iJup

再见!我在网站顶部有一个导航栏,只有两个元素:菜单图标和品牌徽标(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: leftli包含菜单的图标使用如下所示:

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Flexbox导航栏中对齐项目

来自分类Dev

将导航栏中的项目与搜索栏对齐

来自分类Dev

导航栏中的Flexbox:无法垂直对齐项目

来自分类Dev

我的导航栏无法正确填充屏幕的100%宽度。导航栏中的项目变为水平对齐

来自分类Dev

在div中对齐导航栏

来自分类Dev

Bootstrap:在导航栏中对齐导航

来自分类Dev

如何在 Vue.js 项目的导航栏中右对齐链接?

来自分类Dev

我想在不使用 Bootstrap 的情况下对齐导航栏中的项目

来自分类Dev

在导航栏中添加左对齐的徽标

来自分类Dev

如何对齐导航栏中的元素?

来自分类Dev

导航中的垂直对齐搜索栏

来自分类Dev

导航栏中的 bootstrap 4 按钮对齐

来自分类Dev

如何在 CSS 中垂直对齐两个导航栏项目,然后是图像,然后是两个导航栏项目?

来自分类Dev

Bootstrap 4-将导航栏项目向右对齐

来自分类Dev

bootstrap4在左侧对齐导航栏项目

来自分类Dev

引导导航栏项目在较小的屏幕上无法正确对齐

来自分类Dev

导航栏的 Bootstrap 对齐中心折叠项目

来自分类Dev

导航栏中的导航栏按钮项目“撰写”在右侧移动

来自分类Dev

对齐导航栏

来自分类Dev

导航栏项目不可单击,右侧的导航项目未正确对齐

来自分类Dev

在导航栏中显示活动项目

来自分类Dev

bootsrap导航栏中的项目数

来自分类Dev

在导航栏中显示活动项目

来自分类Dev

将导航栏中的内容与bootsrap中的位置中心对齐

来自分类Dev

Bootstrap-导航栏中的底部对齐菜单

来自分类Dev

在包含徽标的导航栏中垂直对齐文本

来自分类Dev

无法通过按钮将导航栏中的徽标对齐

来自分类Dev

我无法在React js中对齐我的导航栏

来自分类Dev

在导航栏中并排对齐3个div

Related 相关文章

热门标签

归档