2

我查看了有关该主题的其他帖子，经过数小时的反复试验，我认为是时候提出这个问题了，所以我继续创建该网站。

我有一个标题，其宽度为浏览器的 100%，左上角有一个徽标，右边有一个导航菜单，带有纹理背景图像，菜单项应居中。我很接近但第一个菜单项左侧的额外边距困扰着我，我想将所有项目置于背景图像的中心（编辑：我无权发布图像）

这是我的html：

<div class="header">

    <div id="logo" class="grid_4">
      <img src="img/mainlogo-box-texture.png" alt="Hibachi Hero">
    </div>

    <div class="grid_6 omega">
      <ul class="menu">
        <li><a href="index.html">home</a></li>
        <li><a href="menu.html">menu</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div> 
</div>



和CSS：

.header { 
  width: 100%;
  height: 175px;
  background: #D35640;
}   

ul.menu {
  background: url('img/navtexture5.png') no-repeat;
  margin-top: 50px;
  list-style: none;
  float: right;
}

ul.menu li {
  float: left;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 10px 30px 10px 5px;
}

ul.menu li a {
  color: #BABABA;
  font-size: 1.25em;
}

ul.menu li a:hover {
  color: #d35640;
  background: #efec69;
}

真的很感激任何见解。谢谢！

4

0 回答 0