Html lists 最后一项在il到大_Html Lists

Html lists 最后一项在il到大

Html lists 最后一项在il到大,html-lists,Html Lists,你好，我正在尝试制作一个菜单，并制作2行4个按钮。我的问题是，每行中的列表项都比其他所有行高。我试着寻找答案，但我不确定如何用词来找到我正在寻找的答案我已经尝试在css的#菜单li#a{部分中为每个维度指定维度，但它没有明显的影响。任何输入都非常感谢我的代码如下 <html> <head> <title>xxxxxxxx</title> <style type="text/css"> body { background-color:

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

我已经尝试在css的#菜单li#a{部分中为每个维度指定维度，但它没有明显的影响。任何输入都非常感谢

我的代码如下

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


xxxxxxxx
身体{
背景色：黑色；
保证金：0；
}
#菜单{
宽度：850px；
列表样式：无；
保证金：0；
填充：0；
}
#菜单2{
宽度：850px；
列表样式：无；
保证金：0；
填充：0；
}
#菜单里{
浮动：左；
边框：2倍纯黄色；
文本缩进：-9999px；
溢出：隐藏；
}
#李美娜{
浮动：左；
边框：2倍纯黄色；
文本缩进：-9999px；
溢出：隐藏；
}
#菜单李a{
显示：块；
宽度：200px；
高度：50px；
}
#menu2 li a{
显示：块；
宽度：200px；
高度：50px；
}
#菜单li#主页a{
背景：url（New_Homepage.JPG）不重复；
}
#menu2 li#通讯a{
背景：url（New_Newsletter.JPG）不重复；
}
#菜单li#主页a：悬停{
背景：url（新主页www.JPG）不重复；
}
#menu2 li#通讯a：悬停{
背景：url（New_Newsletter_knife.JPG）不重复；
}
#菜单李#欢迎光临{
背景：url（New_Welcome.JPG）不重复；
}
#menu2 li#电话簿a{
背景：url（New_Phonebook.JPG）不重复；
}
#菜单李#欢迎a:悬停{
背景：url（New_Welcome_knife.JPG）不重复；
}
#menu2 li#电话簿a：悬停{
背景：url（New_Phonebook_knife.JPG）不重复；
}
#菜单李#领导力a{
背景：url（New_Leadership.JPG）不重复；
}
#menu2 li#a{
背景：url（New_ombudom.JPG）不重复；
}
#菜单李#领导a：悬停{
背景：url（New_Leadership_knife.JPG）不重复；
}
#menu2 li#监察员a：悬停{
背景：url（New_.JPG）不重复；
}
#菜单李#历史a{
背景：url（New_History.JPG）不重复；
}
#梅努2李保阿{
背景：url（New_PAO.JPG）不重复；
}
#菜单李#历史a：悬停{
背景：url（New_History_knife.JPG）不重复；
}
#梅努2李保甲：悬停{
背景：url（New_PAO_knife.JPG）不重复；
}

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

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

首先，你不需要两个id菜单和menu2，因为它们具有相同的属性你应该把它改成class，而且在

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>

这就是你想要的吗：

问题是：

<br class=clear>
</ul>

你需要把这个破折号放在列表之外。如下所示：

</ul>
<br class=clear>

</ul>
<br class=clear>