css讓下拉菜單出現在接下來的文字中：請看屏幕截圖

客戶端想要這樣的東西。我可以管理造型（角落和全部），但是我無法將「下拉」放置在單元格左側的文本下。我的html如下。在此先感謝css讓下拉菜單出現在接下來的文字中：請看屏幕截圖

enter image description here

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('div.outside').hide(); 

      $('div.selector').click(function() { 
       var hidden = $(this).parents('td').find('div.outside :hidden').length > 0; 
       $('div.outside').hide(); 
       if (hidden) { 
        $(this).parents('td').find('div.outside').show().animate('slow'); 
       } else { 
        $(this).parents('td').find('div.outside').hide().animate('slow'); 
       } 
      }); 

     }); 

    </script> 
    <style type="text/css"> 
     ul.action 
     { 
      list-style-type: none; 
      list-style-position: outside; 
      padding: 0px; 
      text-align: left; 
      margin: 0px; 
     } 
     ul li 
     { 
      margin: 1px 0px 1px 0px; 
     } 
     div.content 
     { 
      border-style: solid; 
      border-width: 1px; 
      padding: 1px; 
      white-space: nowrap; 
      overflow: auto; 
     } 

     div.outside 
     { 
      width: 200px; 
      position: absolute; 
      z-index: 100; 
     } 

     div.top 
     { 
      width: 200px; 
     } 
     div.selector 
     { 
      cursor: pointer; 
      padding: 1px 1px 0px 1px; 
      float: right; 
      border-style: solid; 
      border-width: 1px; 
      border-bottom-style: solid; 
      top: 2px; 
      position: relative; 
     } 
     .popup-dropdown 
     { 
      background-color: #FFFFE1; 
     } 
     thead td 
     { 
      font-weight: bold; 
      width: 100px; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <td> 
        Name 
       </td> 
       <td> 
        Rank 
       </td> 
       <td colspan="2" style="width: 20px;"> 
        Style 
       </td> 
      </tr> 
     </thead> 
     <tr> 
      <td> 
       Jimmi Hendrix 
      </td> 
      <td> 
       1 
      </td> 
      <td> 
       Blues-Rock 
      </td> 
      <td style="width: 20px;"> 
       <div class='top'> 
        <div class='selector popup-dropdown'> 
         X</div> 
       </div> 
       <div style='clear: both;'> 
       </div> 
       <div class='outside'> 
        <div class='content popup-dropdown'> 
         <ul class='action'> 
          <li>Make God Status</li> 
          <li>Elevate</li> 
          <li>Respect</li> 
         </ul> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Carlos Santana 
      </td> 
      <td> 
       2 
      </td> 
      <td> 
       Blues-Rock 
      </td> 
      <td style="width: 20px;"> 
       <div class='top'> 
        <div class='selector popup-dropdown'> 
         X</div> 
       </div> 
       <div style='clear: both;'> 
       </div> 
       <div class='outside'> 
        <div class='content popup-dropdown'> 
         <ul class='action'> 
          <li>Make God Status</li> 
          <li>Elevate</li> 
          <li>Respect</li> 
         </ul> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate pulvinar 
    nisi vel tincidunt. Mauris eget pulvinar enim. Suspendisse vitae turpis id orci 
    porttitor auctor nec ut nisi. Nunc euismod. </div> 
</body> 
</html>

來源

2011-09-29 kevcoder

所以....什麼不順心？我可以看到你想模擬某種下拉菜單，並且你似乎無法在左邊單元格的文本下面找到它，但是當我將代碼放入[jsfiddle]（http://jsfiddle.net/F5bn4 /）它似乎正常工作。 –

在spec截圖中你會看到「下拉箭頭」離左邊的單元格更近 – kevcoder

@Joseph jsfiddle rocks！包含是200px容納div.outside。我只希望單元格的寬度爲20px，div.outside在文本「Blues Rock」下面向左「浮動」多餘的180px。它的接近，但... – kevcoder

好吧。糾正我，如果我誤解了，但我認爲你只是想基本擺脫'X'旁邊的差距，並彈出右邊緣與'X'框右邊緣對齊。你可以用絕對定位來完成。我已經更改了小提琴這裏：http://jsfiddle.net/F5bn4/2

我改變了內聯樣式的td S和我換200像素爲20px上div.top

來源

2011-09-30 02:54:13

css讓下拉菜單出現在接下來的文字中：請看屏幕截圖

回答

相關問題