列表項目，兩個超鏈接CSS設計

我需要它有它內部的兩個按鈕如下一個<li>元素：列表項目，兩個超鏈接CSS設計

<li> 
    <a href="#" class="left">The title</a> 
    <a href="#" class="right"></a> 
</li>

類似下面的按鈕的佈局：

____________ 
|_________|__|

背景將跨越整個按鈕，左側的<a>標籤將充滿文本，右側的標籤帶有alpha透明按鈕以覆蓋<li>元素的背景。這是我得到的CSS。

#left ul#main-menu li.li-add a { 
    display:block; 
    padding:4px 6px 6px 6px; 
    text-decoration:none; 
    color:#fff; 
    font-size:12px; 
    margin:0; 
} 

#left ul#main-menu li.li-add { 
    height:25px; 
    margin:0; 
    padding:0; 
    background: url('button_back.gif') no-repeat; 
} 

#left ul#main-menu li.li-add a.left { 
    width:106px; 
    float:left; 
    padding:5px 6px 6px 6px; 
} 

#left ul#main-menu li.li-add a.left:hover { 
    background: url('button_back_hover.gif') no-repeat; 
} 

#left ul#main-menu li.li-add a.right { 
    float:left; 
    text-align:center; 
    font-size:16px; 
    padding:4px 0 0 0; 
    margin:0; 
    height:21px; 
    width:27px; 
    font-weight:bold; 
} 

#left ul#main-menu li.li-add a.right:hover { 
    background: url('button_back_hover.gif') no-repeat center right; 
}

我正在做所有其他列表項目類似的事情，除了他們沒有右側的「添加」按鈕。我遇到的問題是正在推出兩個像素的差距，推動其他<li>元素。我不確定我在做什麼錯誤。我可以做margin-bottom:-2px，但是所做的只是在下面的元素中創建一個不可點擊的2像素區域。

編輯

這是浮動實際。

#left ul#main-menu li.li-add a.right { 
    float:left; 
    text-align:center; 
    font-size:16px; 
    padding:4px 0 0 0; 
    margin:0; 
    height:21px; 
    width:27px; 
    font-weight:bold; 
}

float:left不應該一直在那裏，由於某種原因，這樣做會導致創建一個額外的差距。聳肩。

來源

2009-07-24 Kezzer

只需發佈您的編輯作爲答案，否則這一直顯示爲未解決/未答覆。 – random 2009-09-12 08:39:07

我覺得你的問題是紅鯡魚。我能有列表佈局不錯，緊張加：

height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */

你永遠不指定留下了標籤的高度，它的自動高度比爲.right標籤中指定的25px高。您正在li標籤上設置高度，但它們是內嵌元素，而不是您製作標籤時的塊元素。只有塊元素可以具有指定的高度。希望這可以幫助。

祝你好運！

來源

2009-07-24 11:31:12 mixonic

列表項目，兩個超鏈接CSS設計

回答

相關問題