css問題伸展中間div聖盃

我似乎無法弄清楚爲什麼我的menuitem類中的中間div（menu-item-middle類）不會拉伸accross。我現在花了很多時間在這個上面，我想我最好發佈這個，因爲我無法弄清楚這一點。這是我的代碼看起來像。css問題伸展中間div聖盃

.menu-item div 
{ 
    display:inline-block 
} 
.menu-item-left 
{ 
    left:0px; float:left; border:1px solid #000000 
} 
.menu-item-middle 
{ 
    padding-top:5px; padding-bottom:6px; padding-right:5px; left:39px; float:left; border:1px solid #000000 
} 
.menu-item-right 
{ 
    width:26px; height:44px; right:0px; clear:right; background-image:url('images/Menu_Item_Arrow.jpg'); background-repeat:no-repeat; border:1px solid #000000 
} 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      <div class="menu-item"> 
       <div class="menu-item-left"> 
        <div class="item-corner"> 
        </div> 
        <div class="item-icon"> 
         <img alt="" height="36" src="images/spacer.gif" width="36" /> 
        </div> 
       </div> 
       <div class="menu-item-middle"> 
        <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px"> 
         <tr> 
          <td> 
           <a href="#"> 
           <span style="font-family:Verdana; font-size:.95em; font-weight:bold">Technology</span> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Computers &amp; 
           Office Supplies</span></td> 
         </tr> 
        </table> 
       </div> 
       <div class="menu-item-right"> 
        <img alt="" height="44" src="images/spacer.gif" width="26" /> 
       </div> 
      </div> 
      <div class="menu-item"> 
       <div class="menu-item-left"> 
        <div class="item-corner"> 
        </div> 
        <div class="item-icon"> 
         <img alt="" height="36" src="images/spacer.gif" width="36" /> 
        </div> 
       </div> 
       <div class="menu-item-middle"> 
        <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px"> 
         <tr> 
          <td> 
           <a href="#"> 
           <span style="font-family:Verdana; font-size:.95em; font-weight:bold">Intersts</span> 
           </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Movies Books &amp; 
           Music</span></td> 
         </tr> 
        </table> 
       </div> 
       <div class="menu-item-right"> 
        <img alt="" height="44" src="images/spacer.gif" width="26" /> 
       </div> 
      </div> 
      <div class="menu-item"> 
       <div class="menu-item-left"> 
        <div class="item-corner"> 
        </div> 
        <div class="item-icon"> 
         <img alt="" height="36" src="images/spacer.gif" width="36" /> 
        </div> 
       </div> 
       <div class="menu-item-middle"> 
        <table border="0" cellpadding="0" cellspacing="0" style="margin-left:5px"> 
         <tr> 
          <td> 
           <a href="#" style="text-decoration:none; color:#0b83bb"> 
           <span style="font-family:Verdana; font-size:.95em; font-weight:bold"> 
           Entertainment</span> </a> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <span style="font-family:Arial; font-size:.7em; color:#0b83bb">Software &amp; 
           Digital Games</span></td> 
         </tr> 
        </table> 
       </div> 
       <div class="menu-item-right"> 
        <img alt="" height="44" src="images/spacer.gif" width="26" /> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table>

來源

2011-04-26 ONYX

這是怎麼想的樣子，你能告訴我們你想如何就呈現截圖試試？附：混合表和DIV從來不是一個好主意:) – Tom 2011-04-26 06:30:50

這是因爲您已經設置了float屬性。如果你想保留它，然後嘗試給課程添加width: 100%。

來源

2011-04-26 06:30:03

我刪除了浮動chnaged寬度爲100％，這是行不通的 – ONYX 2011-04-26 06:43:05

然後問題應該是在TD的寬度持有div。嘗試添加寬度屬性。 – 2011-04-26 06:48:45

我解決了它 – ONYX 2011-04-26 11:14:49

我覺得這是因爲這div的內容與其他兩個不一樣。你可以用

CSS

.menu-item-middle {min-width:150px}

它從IE8 &工作+

來源

2011-04-26 06:40:13 thecodeparadox

是啊，ID喜歡爲大多數瀏覽器工作壽 – ONYX 2011-04-26 06:44:05

css問題伸展中間div聖盃

回答

相關問題