Последний элемент в il to big

Привет, я пытаюсь сделать меню и сделать 2 ряда из 4 кнопок. Моя проблема в том, что элемент списка в каждой строке выше, чем все остальные. Я попытался найти ответ, но я не совсем уверен, как его найти, чтобы найти ответ, который я ищу.Последний элемент в il to big

Я пробовал задавать размеры в #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>

источник

2013-03-28 user2196028

«Элемент списка в каждом ряду выше, чем все остальные».

, глядя на ваш CSS, список ваш товар должен быть все одинаковой высоты, так как вы определите высоту в вашем теге внутри тега LI

в первую очередь вам не нужно два #menu ID и # 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/

источник

2013-03-28 19:43:28 beautifulday

Проблема заключается в том:

<br class=clear> 
</ul>

Вам нужно положить, что перерыв за пределами списка. Например:

</ul> 
<br class=clear>

источник

2013-03-28 19:43:31

Это исправлено. Благодарю. – user2196028

Последний элемент в il to big

ответ

Смежные вопросы