0

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

我已经尝试在#menu li# 中为每个尺寸指定一个 { 部分的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>
4

2 回答 2

0

"list item in each row is taller then all the rest."

by looking at your css, your list item should be all the same height because you specify a height in your a tag inside your li tag

first of all you dont need two id #menu and #menu2, because they have the same properties you should change it to class, also u dont need "<Br />" before </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'); }

is this what you want: http://jsfiddle.net/EKycL/

于 2013-03-28T19:43:28.133 回答
0

The problem is:

<br class=clear>
</ul>

You need to put that break outside of the list. Like this:

</ul>
<br class=clear>
于 2013-03-28T19:43:31.137 回答