Menu UL中的选择器_Menu_Html Lists_Css Selectors

Menu UL中的选择器

Menu UL中的选择器,menu,html-lists,css-selectors,Menu,Html Lists,Css Selectors,我对我创建的简单“ul”菜单有问题。我想实现的是简单地添加填充到菜单项1-4，而不是徽标图像。我尝试了一门“a”标签的课程，但没有乐趣。我可以选择“UL.menu”填充整个UL，这是您所期望的。（这一切都发生在display:inline上）如果我用float:left而不是display:inline，我只能选择“a”标记，但如果我这样做，我会步履蹒跚地使整个菜单与标题居中那么解决方案是什么呢？我想添加一个100像素的填充顶部，只是“a”标签，而不是标志图像 HTML 非常感谢在ul中放

我对我创建的简单“ul”菜单有问题。我想实现的是简单地添加填充到菜单项1-4，而不是徽标图像。我尝试了一门“a”标签的课程，但没有乐趣。我可以选择“UL.menu”填充整个UL，这是您所期望的。（这一切都发生在display:inline上）如果我用float:left而不是display:inline，我只能选择“a”标记，但如果我这样做，我会步履蹒跚地使整个菜单与标题居中

那么解决方案是什么呢？我想添加一个100像素的填充顶部，只是“a”标签，而不是标志图像

HTML

非常感谢

在ul中放置img标签是无效的HTML。您必须首先将img包装在li标记中，并给它一个ID，如下所示：

然后应用如下CSS：

ulli{
填充顶部：100px；
}
ul li#logo#u li{
填充顶部：0px；
}

以下是您想要实现的一个工作示例：（添加了红色边框，以便可以看到li的高度+填充）

<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>

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%; 
}