导航菜单中间的中心标志

  • Z时代
  • 2024-01-10
  • 分类：问答

我期待在我居中的顶部导航菜单" title="导航菜单">导航菜单中间显示我的标志。就像现在这样，我将徽标放在它的顶部。如果我将菜单项分割到不同的容器中，然后使用边距和填充来实现这个功能，最简单吗？还是有更高效的方法？导航菜单中间的中心标志

这是一个JS小提琴，展示了我当前的场景。 JS Fiddle

这是我目前的CSS：

.container { 
width:960px; 
margin:0 auto; 
} 
header, main{ 
    display: block; 
} 
.container-narrow { 
margin:0 auto; 
width:640px; 
} 
h1.logo { 
width:300px; 
margin:0 auto; 
text-indent:100%; 
overflow:hidden; 
white-space:nowrap; 
} 
body h1 { 
background:url(http://placehold.it/300x80) no-repeat; 
height:80px; 
} 
body section.menu,body header.top-section { 
background:url(../img/menu-bg.png) repeat; 
padding:60px 0; 
} 
body header.top-section { 
padding:40px 0; 
position:absolute; 
top:0; 
left:0; 
width:100%; 
z-index:50; 
} 
#menu_container { 
    letter-spacing: 2px; 
    font-family:'intro_regular', sans-serif; 
    font-size: 1.3em; 
    line-height: 1.3em; 
    position: fixed; 
    margin: 0; 
    /*margin-top: -70px; 
    position: relative;*/ 
    z-index: 20; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 6px; 
    height: 40px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#menu_container .nav ul { list-style: none; overflow: auto; } 
#menu_container .nav li { float: left; padding: 0.4em 0.8em; font-size: 0.9em; line-height: 1em; cursor: pointer; } 
#menu_container .nav li a { text-decoration: none; text-transform: uppercase; } 
#menu_container .nav li:hover a, 
#menu_container .nav li.active a { color: #fff !important; } 
#menu_container .nav li.contact_screen:hover a, 
#menu_container .nav li.contact_screen.active a { color: white !important; } 
#menu_container .nav li a { color: #000000; } 
#menu_container .nav li a { transition: all 400ms; -webkit-transition: all 400ms; } 
#menu_links { display: inline-block; } 
#menu_button { display: none; color: white; cursor: pointer; text-align: right; padding: 0 0.8em; } 
#menu_button i { font-size: 1.3em; margin-right: -0.3em; color:#bc9321;} 
#menu_links li:first-child {}

回答：

最近我遇到了这种情况。我通过绝对定位徽标来完成工作，然后使用:nth-child选择器来定位徽标任意一侧的元素，并添加边距以腾出空间。

Here's the Fiddle

:nth-child是伟大的，但你可能需要一个后备组的样式older browsers。

回答：

你可以坚持你的标志类作为中间的李。

 <div id="menu_links" class="nav"> 
      <ul> 
       <li class="home_link"><a href="#splash_wrapper">Home</a></li> 
       <li class="menus_link"><a href="#menus_wrapper">Menus</a></li> 
<li class="logo">Restauraunt</li 
       <li class="contact_link"><a href="#contact_wrapper">Contact</a></li> 
       <li class="reservations_link"><a href="#reservations_wrapper">Reservations</a></li> 
      </ul> 
     </div>

然后将h1.logo改为li.logo。

回答：

你有没有考虑CSS3显示：flex？

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

以上是 导航菜单中间的中心标志 的全部内容， 来源链接： utcz.com/qa/262241.html

回到顶部