UL 中的选择器答案

【问题标题】：selectors in ULUL 中的选择器
【发布时间】：2012-12-22 20:37:42
【问题描述】：

我创建的一个简单的“ul”菜单有问题。我想要实现的是简单地将填充添加到菜单项 1 - 4 而不是徽标图像。我已经在“a”标签上尝试过一门课，但没有任何乐趣。我可以选择您所期望的“ul.menu”来填充整个 UL。（这一切都发生在显示：内联）如果我浮动：左而不是显示：内联我只能选择“a”标签，但如果我这样做，我会努力将整个菜单与标题居中。

那么解决方法是什么？我想为“a”标签而不是徽标图像添加一个 100 像素的 padding-top。

HTML

<body>
  <div class="wrapper clearfix">

    <div id="header">

 <nav> 
    <ul class="menu">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item2</a></li>
      <img src="images/logo.png" id="logo">
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
    </ul> 

 </nav>     

    </div><!--end of header-->

  </div><!--end of wrapper-->
</body>

CSS

li {
display:inline;
padding-left: 2%;   
padding-right: 2%;
}

.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height: 400px;
display: block;
background-image:url(../images/header.jpg);
font:"Agency FB";
}

#logo   {
padding-top: 1%;
padding-bottom: 1%; 
}

非常感谢

【问题讨论】：

标签： menu html-lists css-selectors

【解决方案1】：

在 ul 中放置 img 标签不是有效的 HTML。您必须先将 img 包装在 li 标签中，并为其指定一个 ID，如下所示：

<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff2</a></li>
<li id="logo_li"><img src="myimage.jpg"></img></li>
</ul>

然后应用这样的 CSS：

ul li {
padding-top: 100px;
}
ul li#logo_li {
padding-top: 0px;
}

这是您想要实现的工作示例 jsfiddle： http://jsfiddle.net/4BjEz/ （添加了红色边框，以便您可以看到 li 的高度+填充）

【讨论】：