html - CSS 列表菜单翻转填充/边距

Question

我想知道是否有人可以帮助我解决 css/html 问题。

我有一张复杂的背景图片。菜单 div 位于正确的位置，以覆盖它要定位的背景。整个 LI 有一个 hover rollover image，显示类型为 block。结果是，当鼠标悬停在列表 href 上时，整个 block 翻转都有效。

但是，当我尝试添加填充以在列表项文本及其边框之间创建缓冲区时，问题发生了。事情开始变得有趣了……我将添加一个屏幕截图。移动它需要填充从边境。

第二个问题是我无法在不应用行高的情况下将文本对齐到中间。该解决方案在元素换行之前效果很好。我需要能够换行菜单项文本。

下面的示例显示了当前 CSS/HTML 的状态。菜单栏和翻转按预期到位。修改我不能将图像限制为新人在这里发帖的限制。但是可以在 213.40.100.100/example1.jpg 找到示例

以下示例显示了添加填充或边距时的状态。 LI 似乎完全移动，没有移动内部文本..

213.40.100.100/example2.jpg

 <div id="wrapper">      
  <div
  id="header">Header</div>      <div
  id="menu">
     <ul>
       <li><a>Contact Us</a></li>
       <li><a>Recommends</a></li>
       <li><a>Deals</a></li>
       <li><a>Home</a></li>
     </ul>      </div>      <div id="content">Content</div>      
  <div id="footer">Footer</div>  
</div>




 @charset "utf-8"; /* CSS Document */



 * {  margin: 0;  padding: 0; }

 body {  
padding-top: 10px;
  background: url(background.jpg) no-repeat center top;  height:100%; 
}

 div#wrapper {  
margin: auto;  
height: 100%;  
width: 978px;
  min-width: 978px;
 }

 div#header { 
 height: 196px;
 }

 div#menu { 
 height: 69px; 
 position:
 relative; 
}

 div#menu ul { 
 height: 69px;

  list-style-type: none; 
}

 div#menu ul li { 
 display: block;  

  height: 69px; 
 width: 140px; 
 float: right; 
 padding: 5px; 
}

 div#menu ul li a:hover {
  display:block;
  background:url(menu_red_bg.jpg) repeat-x;  height: 69px;  color:#FF0;
  font-family: Arial, Helvetica, sans-serif; 
 font-size: large; 
}

 div#menu ul li a { 
 text-decoration: none; 
 color:#000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
 }

 div#content {  margin-top: 80px; }

Answer 1

我认为您将填充添加到错误的元素。或者你给 <li> 添加一个“边距”或者您将填充添加到 div#menu

我应该这样做:

带有黄色渐变背景的 div#menu，内边距为 5px，外边距为:80px 0 0 0；在这个 div 中，<ul><li>...</li></ul>您不需要向 li 添加任何填充或边距，只需确保每个 li 的高度小于 div#menu高度 + 填充。