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

Question

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

我有一个复杂的背景图片。菜单 div 位于正确的位置，以覆盖要定位的背景。整个 LI 有一个悬停翻转图像，显示类型为块。结果是，当鼠标悬停在列表 href 上时，整个块翻转工作..

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

存在第二个问题，即我无法在不应用行高的情况下将文本向中间倾斜。该解决方案在项目换行之前效果很好。我需要能够换行菜单项文本。

以下示例显示了当前 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 heigh + padding。