如何在中心徽标的两侧提供导航选项？

问题描述：

我想创建一个顶部标题，中间有徽标，左侧和右侧有导航选项。如何在中心徽标的两侧提供导航选项？

以下是我迄今为止的内容，但不知道如何将其带到那里。我该怎么做才能做到这一点？

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 4</li> 
    <img class="logo_home" src="logo.png" height="100"> 
      <li>Option 5</li> 
      <li>Option 6</li> 
      <li>Option 7</li> 
      <li>Option 8</li> 
     </ul> 
    </div> 
</div>

CSS：

ul { 
list-style:none; 
} 
li { 
display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
top: 0; 
left: 0; 
position:absolute; 
} 
.logo_home { 
display:block; 
margin-left:auto; 
margin-right:auto; 
}

只是纠正你的东西是不是你所要求的真正相关的，但我看到一个错误。 'li'元素没有'href'属性。 – trajce 2013-04-06 19:35:52

@trajce对不起！我以前有一个标签，但我删除了它，但我想不知何故我仍然有href部分。 – AAA 2013-04-06 19:38:11

检查我的答案，菜单居中。 – trajce 2013-04-06 19:53:29

答

这里是一个fiddle什么，我认为你正在努力实现。更改li inline to float，现在ul需要根据您的需要进行修改，因此它可以居中。

这里是另一个fiddle我认为这正是你想要实现的。您只需要将display:block删除到图像并将text-align:center添加到ul。这样的元素是在中心。

因此，这里的HTML

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li href="#">Option 1</li> 
      <li href="#">Option 2</li> 
      <li href="#">Option 3</li> 
      <li href="#">Option 4</li> 
      <li><img class="logo_home" src="logo.png" height="100" /></li> 
      <li href="#">Option 5</li> 
      <li href="#">Option 6</li> 
      <li href="#">Option 7</li> 
      <li href="#">Option 8</li> 
     </ul> 
    </div> 
</div>

，这里是你的CSS

ul { 
list-style:none; 
    text-align:center;/* this will center your items*/ 
} 
li { 
    margin: 0 5px; 
    display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
} 
.logo_home { 
margin-left:auto; 
margin-right:auto; 
/*removed display:block*/ 
}

谢谢@trajce！这将工作，但菜单选项显示在标题下。我需要他们与徽标一起展示。 – AAA 2013-04-06 19:56:20

答

我改变display: inline从li到float: left并在li标签包裹img。看起来它是你在找什么：FIDDLE

谢谢Artyom。但它似乎标志不集中，所以不知道这是否适用于我。 – AAA 2013-04-06 19:51:24

答

我想这是你想要什么：

http://jsfiddle.net/VWcVw/

一切设置为display: inline，并把图像中的<li>标签。

编辑：这是一个更好的版本，与标志两侧的链接水平堆叠。 http://jsfiddle.net/VWcVw/1/

谢谢@uncleshelby。徽标不居中，菜单选项没有水平对齐。 – AAA 2013-04-06 19:53:44

我更新了它，如果我理解正确，它应该会更好。 – uncleshelby 2013-04-06 20:14:13

答

这是要走得更远。我会将左右分为两个班级，也可以放置链接。

.logo_home img{ 
margin:0 auto; 
} 
.navleft { 
    float: left; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
.navleft li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
.navright { 
    float: right; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
    .navright li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
</style> 
</head> 
<body> 
<div class="header"> 
     <ul> 
      <div class="navleft"> 
      <li><a href="#">Option 1</li> 
      <li><a href="#">Option 2</li> 
      <li><a href="#">Option 3</li> 
      <li><a href="#">Option 4</li> 
    </div>  
    <img class="logo_home" src="logo.png" height="100"> 
    <div class="navright"> 
      <li><a href="#">Option 5</li> 
      <li><a href="#">Option 6</li> 
      <li><a href="#">Option 7</li> 
      <li><a href="#">Option 8</li> 
     </ul> 
    </div> 
</div>

答

像这样的事情会做它 -

.left-li { 
    float:left; 
} 
img { 
    float:left; 
} 
.right-li { 
    float:left; 
}

这里的HTML

<div class="header"> 
<div class="nav"> 
    <ul class="left-li"> 
     <li href="#">Option 1</li> 
     <li href="#">Option 2</li> 
     <li href="#">Option 3</li> 
     <li href="#">Option 4</li> 
    </ul> 
<img class="logo_home" src="logo.png" height="100"> 
    <ul class="right-li"> 
     <li href="#">Option 5</li> 
     <li href="#">Option 6</li> 
     <li href="#">Option 7</li> 
     <li href="#">Option 8</li> 
    </ul> 
</div>

如何在中心徽标的两侧提供导航选项？

相关推荐