Question

您好我正在尝试制作菜单并制作2行4个按钮。我的问题是每行中的列表项高于其他所有列。我试着寻找答案，但我不确定如何用它来找到我正在寻找的答案。

我已经尝试在#menu li＃a {每个css的一部分中指定尺寸，但它没有明显的影响。任何意见都表示赞赏。

我的代码如下。

<html>
<head>
<title>xxxxxxxx</title>
<style type="text/css">
body {
background-color: black;
margin: 0;
}
#menu {
width: 850px;
list-style: none;
margin: 0;
padding: 0;
}
#menu2 {
width: 850px;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
border: 2px solid yellow;
text-indent: -9999px;
overflow: hidden;
}
#menu2 li {
float: left;
border: 2px solid yellow;
text-indent: -9999px;
overflow: hidden;
}
#menu li a {
display: block;
width: 200px;
height: 50px;
}
#menu2 li a {
display: block;
width: 200px;
height: 50px;
}
#menu li#homepage a {
background: url(New_Homepage.JPG) no-repeat;
}
#menu2 li#newsletter a {
background: url(New_Newsletter.JPG) no-repeat;
}
#menu li#homepage a:hover {
background: url(New_Homepage_knife.JPG) no-repeat;
}
#menu2 li#newsletter a:hover {
background: url(New_Newsletter_knife.JPG) no-repeat;
}
#menu li#welcome a {
background: url(New_Welcome.JPG) no-repeat;
}
#menu2 li#phonebook a {
background: url(New_Phonebook.JPG) no-repeat;
}
#menu li#welcome a:hover {
background: url(New_Welcome_knife.JPG) no-repeat;
}
#menu2 li#phonebook a:hover {
background: url(New_Phonebook_knife.JPG) no-repeat;
}
#menu li#leadership a {
background: url(New_Leadership.JPG) no-repeat;
}
#menu2 li#ombudsman a {
background: url(New_Ombudsman.JPG) no-repeat;
}
#menu li#leadership a:hover {
background: url(New_Leadership_knife.JPG) no-repeat;
}
#menu2 li#ombudsman a:hover {
background: url(New_Ombudsman_knife.JPG) no-repeat;
}
#menu li#history a {
background: url(New_History.JPG) no-repeat;
}
#menu2 li#pao a {
background: url(New_PAO.JPG) no-repeat;
}
#menu li#history a:hover {
background: url(New_History_knife.JPG) no-repeat;
}
#menu2 li#pao a:hover {
background: url(New_PAO_knife.JPG) no-repeat;
}
</style>
</head>
<body>
<div style="text-align: center;"><img src="POSTER.JPG" WIDTH="100%" HEIGHT="90%"></div>
<div>   
<ul id="menu">
<li id="homepage"><a href="homepage.htm">HOMEPAGE</a></li>
<li id="welcome"><a href="Welcome.htm">WELCOME</a></li>
<li id="leadership"><a href="leadership.htm">LEADERSHIP</a></li>
<li id="history"><a href="history.htm">HISTORY</a></li>
<br class=clear>
</ul>
<ul id="menu2">
<li id="newsletter"><a href="newsletter.htm">NEWSLETTER</a></li>
<li id="phonebook"><a href="phonebook.htm">PHONE BOOK</a></li>
<li id="ombudsman"><a href="ombudsman.htm">OMBUDSMAN</a></li>
<li id="pao"><a href="pao.htm">PAO</a></li>
<br class=clear>
</ul>
</div>
</body>
</html>

Answer 1

“每行中的列表项高于其他所有列。”

通过查看您的css，您的列表项应该是相同的高度，因为您在li标签内的标签中指定了一个高度

首先，你不需要两个id #menu和＃menu2，因为它们具有相同的属性你应该把它改成课堂，在<Br />

之前你也不需要“</ul>”

HTML：

    <ul class="menustyle" id="menu"> 
       <li id="homepage"><a href="homepage.htm">HOMEPAGE</a></li> 
       <li id="welcome"><a href="Welcome.htm">WELCOME</a></li> 
       <li id="leadership"><a href="leadership.htm">LEADERSHIP</a></li> 
       <li id="history"><a href="history.htm">HISTORY</a></li> 
    </ul> 
    <ul class="menustyle" id="menu2"> 
       <li id="newsletter"><a href="newsletter.htm">NEWSLETTER</a></li> 
       <li id="phonebook"><a href="phonebook.htm">PHONE BOOK</a></li> 
       <li id="ombudsman"><a href="ombudsman.htm">OMBUDSMAN</a></li> 
       <li id="pao"><a href="pao.htm">PAO</a></li> 
    </ul>

CSS：

 .menustyle {
      clear:both;
      width: 850px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .menustyle li {
      float: left;
      border: 2px solid yellow;
      text-indent: -9999px;
      overflow: hidden;
      height: 50px;
    }   
    .menustyle  li a {
      display: block;
      width: 200px;
      height: 50px;
    }

    /*for each id, i just make this for example*/
.menustyle li a{ background:url('http://www.braford.org.au/MidgeeBrafords/images/button_midgee_history_up.gif'); }

这就是你想要的：http://jsfiddle.net/EKycL/

Answer 2

问题是：

<br class=clear>
</ul>

你需要把那个休息放在列表之外。像这样：

</ul>
<br class=clear>

il中的最后一项

2 个答案: