刪除使用div的水平菜單中的空間

我正在嘗試創建一個基本的水平菜單（無下拉菜單）。圖像是爲菜單創建的，但我仍然在菜單的右側看到一個空格。我使用div創建了導航。 Stack上的大部分類似問題都是用UL和LI創建的菜單，與我的不同。刪除使用div的水平菜單中的空間

我的菜單在IE中看起來很好，但在FF，Chrome，Safari和Opera中沒有。（Sample link）任何人都可以解釋爲什麼這是，我怎麼能解決它？

<div style="width: 915px; height:33px;"> 
    <div style="width:40px; height:33px; float:left;"><img runat="server" border="0" src="~/_images/_nav/nav_left.jpg" /></div> 
    <div style="width:835px; height:33px; float: left; "> 
    <div class="mynav" style="width:136px; height:33px; background-image:url(../_images/_nav/nav_student_left2.jpg)" ></div> 
    <div class="mynav" style="width:155px; height:33px; background-image:url(../_images/_nav/nav_home2.jpg)"></div> 
    <a runat="server" href="~/studentbranch/checking_savings/"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_stash_my_cash2.jpg);" ></div></a> 
    <a runat="server" href="~/studentbranch/loans/"><div class="mynav" style="width:133px; height:33px; background-image:url(../_images/_nav/nav_extra_credit2.jpg)"></div></a> 
    <a runat="server" href="http://www.chachingteenclub.com/default.aspx?cu_id=92" target="_blank"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_cha_ching2.jpg)"></div></a> 
    <a runat="server" href="~/apps_tools/" target="_blank"><div class="mynav" style="width:135px; height:33px; background-image:url(../_images/_nav/nav_tools2.jpg)"></div></a> 
    <div class="mynav" style="width:7px; height:33px; background-image:url(../_images/_nav/nav_student_right2.jpg);"></div> 
    </div> 
    <div style="width:40px; height: 33px; float:left;"> 
     <img runat="server" border="0" src="~/_images/_nav/nav_right.jpg" /> 
    </div> 
    </div>

而CSS

.mynav{ 
float:left; 
background-repeat:no-repeat; 
padding:0; 
display:block; 
border:0 none; 
outline:0 none; 
}

注：我一直在使用display:inline沒有結果也試過。

來源

2013-07-29 Richard Johnson

我改變了我的答案，這是一個好主意，張貼一個理想的情況是什麼樣子的圖像。起初，我認爲彩色圖像右側的圖像是您所談論的問題。 – asimes

編輯：我刪除了我以前的答案，這很可能是問題（我沒有IE，所以我不知道它應該是什麼樣子。將是一個好主意）。

含有<div>的寬度爲835.它的孩子的寬度爲：136,155,134,133,134,135,7。總共是834（這是小於835的一個像素）。右邊的垂直線是背景色。

編輯（再次）：我記得IE瀏覽器具有不同於其他瀏覽器（或至少看似）的浮動行爲。你可以嘗試的只是給出包含<div>適當的background-color的菜單，而不是用<div>寬度玩。

來源

2013-07-29 14:53:18 asimes

是的，我需要導航欄的左側和右側空白間隔，因爲這是我的僱主希望它顯示在模型上的方式。任何想法究竟是什麼導致垂直線空間到正確的nav_student_right2.jpg？ –

834是一個比835少一個像素，我猜這就是垂直線是正確的 – asimes

asimes - 謝謝你的迴應。我會看看寬度。我試圖上傳一個屏幕截圖，但因爲我是新成員，此時Stackoverflow不允許它： - \ –

刪除使用div的水平菜單中的空間

回答

相關問題