[英]UL LI Horizontal List
我創建了一個簡單的UL / LI導航欄。 在IE和Chrome中看起來都很好,但是在Firefox中,將第一個元素下移約35個像素后的任何元素。 我已經嘗試了所有我能想到的解決此問題的方法,但似乎無法正確解決。
這是我當前的代碼:
HTML
<div class="navigation">
<ul>
<li><a href="" class="button_selected_tab"><span>Home</span></a></li>
<li><a href="" class="button_inactive_tab"><span>My Calendar</span></a></li>
<li><a href="" class="button_inactive_tab"><span>Catalog</span></a></li>
<li><a href="" class="button_inactive_tab"><span>My Learning</span></a></li>
<li><a href="" class="button_inactive_tab"><span>Shopping Cart</span></a></li>
<li><a href="" class="button_inactive_tab"><span>My Account</span></a></li>
<li><a href="" class="button_inactive_tab"><span>Support</span></a></li>
<li><a href="" class="button_inactive_tab"><span>Sign Out</span></a></li>
<li><a href="" class="button_inactive_tab"><span>Admin View</span></a></li>
</ul>
<div class="clear_float">
</div>
</div>
CSS:
.navigation {
left: 1px;
position: absolute;
text-align: right;
top: 7px;
white-space: nowrap;
}
.navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.navigation ul li {
display: inline;
margin-right: 2px;
}
.navigation ul li a {
display: inline-block;
line-height: 17px;
/*
padding: 1px 11px 0px
*/;
text-decoration: none;
}
a.button_selected_tab {
background: transparent url('images/orange_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_selected_tab span {
background: transparent url('images/orange_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}
a.button_inactive_tab {
background: transparent url('images/grey_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_inactive_tab span {
background: transparent url('images/grey_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}
我用您的代碼制作了一個示例,並刪除margin-right:2px;
從.navigation ul li
將所有元素設置在同一行中。 這是您需要的嗎?
示例: http : //jsbin.com/uhace3
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.