Question

我正在为我的网站制作导航栏菜单，但我已经堆叠了。这个概念是在导航栏的中间放置徽标，从左边打开三个菜单选项，从右边打开另外三个菜单。

<header id="top-header">
  <div class="row">
    <div class="large-12 columns">
      <div class="logo"></div>
      <ul class="menu" id="nav-menu">
         <li><a href="#">MENU 1</a></li>
         <li><a href="#">MENU 2</a></li>
         <li><a href="#">MENU 3</a></li>
         <li><a href="#">MENU 4</a></li>
         <li><a href="#">MENU 5</a></li>
         <li><a href="#">MENU 6</a></li>
     </ul>
    </div>
  </div>
</header>

我尝试将宽度添加到<li>这样的百分比，这对于菜单标题有效：

#top-header ul > li {
    display: block;
    float: left;
    width: 16%;
    position: relative;
}

但是，我现在的问题是带有徽标的图像。它不会停留在屏幕的中央。图像是整个导航栏，中间有徽标，因此我希望在浏览器更改分辨率时垂直调整图像大小。

#top-header .logo {
    background-color: transparent;
    background-image: url("img/menubar_logo.png");
    height: 100%;
    padding-left: 10px;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

Answer 1

我会将徽标作为中间列表元素并将其转换为虚假表格。这将消除为内部元素定义宽度的需要。

http://jsfiddle.net/3pf4onbj/

<强> HTML

<header id="top-header">
  <div class="row">
    <div class="large-12 columns">
      <ul class="menu" id="nav-menu">
         <li><a href="#">MENU 1</a></li>
         <li><a href="#">MENU 2</a></li>
         <li><a href="#">MENU 3</a></li>
         <li><div class="logo"></div></li>
         <li><a href="#">MENU 4</a></li>
         <li><a href="#">MENU 5</a></li>
         <li><a href="#">MENU 6</a></li>
       </ul>
    </div>
  </div>
</header>

<强> CSS

.logo {
  width:100px;
  height:30px;
  background:#ff0;
}
#top-header ul {
  display:table;
  width:100%;
  margin:0;
  padding:0;
}
#top-header ul > li {
  display: table-cell;
  vertical-align:middle;
  margin:0;
  padding:0;
  text-align:center;
}
#top-header ul > li a {
  display:block;
  padding:3px 5px;
}

将徽标置于屏幕中间

1 个答案: