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圣杯

回答

相关问题