右對齊下拉菜單從表頭中的圖標

我想打開一個下拉菜單，對齊右下的圖標，出現在表頭上的span。右對齊下拉菜單從表頭中的圖標

這就是我得到：

它對齊自然離開圖標下，但我無法找到，將其調整到合適的的好方法。

這是我真正想要的：使用right:0;和過濾容器爲absolute定位

Some suggestions建議。這對我來說並不好，因爲我希望表格標題單元格中的圖標對齊到單元格的右側。將容器設置爲absolute會使對齊表格標題中的圖標變得困難。

如果可能，我正在尋找純粹的CSS解決方案。表格單元的寬度和下拉菜單的寬度是而不是固定的，所以我不能通過指定「像素」來對齊事物。下面

table { 
 
\t font-family:Arial, Helvetica, sans-serif; 
 
\t color:#666; 
 
\t font-size:12px; 
 
\t text-shadow: 1px 1px 0px #fff; \t 
 
\t background:#eaebec; 
 
\t margin:20px; 
 
\t border:black 1px solid; \t 
 
\t border-radius:3px; \t 
 
\t border-collapse: collapse; 
 
\t box-shadow: 0 1px 2px #d1d1d1; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 

 
    
 
table th { 
 
    width:150px; 
 
} 
 

 
.context-icon { 
 
    float:right; 
 
    cursor:default; 
 
    color: green; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    
 
    //position: absolute; 
 
} 
 

 
.filter {    
 
    visibility: hidden; 
 
    display: block; 
 
    position: absolute;  
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 2px 6px;   
 
    max-height: 0px; 
 
    z-index: 1000; 
 
    height:auto; 
 
    transition: visibility 200ms, max-height 200ms ease-in-out; 
 
     
 
    //right:0; 
 
} 
 

 
.filter-open { 
 
    display: block; 
 
    max-height: 300px; 
 
    visibility: visible; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<body> 
 

 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>first</th> 
 
     <th> 
 
      second 
 
      <span> 
 
      <i class="context-icon fa fa-lg fa-filter"> 
 
       <select multiple class="filter filter-open"> 
 
       <option >option1</option> 
 
       <option >option2</option> 
 
       <option >option3</option>   
 
       </select> 
 
      </i> 
 
      </span> 
 
     </th> 
 
     <th>third</th> 
 
     </tr> 
 
    </thead> 
 
    
 
    <tbody> 
 
     <tr> 
 
     <td>xxx</td> 
 
     <td>xxx</td> 
 
     <td>xxx</td> 
 
     </tr> 
 
     <tr> 
 
     <td>xxx</td> 
 
     <td>xxx</td> 
 
     <td>xxx</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
</body>

來源

2016-03-10 Amir Gonnen

我已經相對位置i相加，右0像素的選擇：

i { 
 
    position: relative; 
 
} 
 
i select { 
 
    right: 0px; 
 
} 
 

 
table { 
 
\t font-family:Arial, Helvetica, sans-serif; 
 
\t color:#666; 
 
\t font-size:12px; 
 
\t text-shadow: 1px 1px 0px #fff; \t 
 
\t background:#eaebec; 
 
\t margin:20px; 
 
\t border:black 1px solid; \t 
 
\t border-radius:3px; \t 
 
\t border-collapse: collapse; 
 
\t box-shadow: 0 1px 2px #d1d1d1; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 

 
    
 
table th { 
 
    width:150px; 
 
} 
 

 
.context-icon { 
 
    float:right; 
 
    cursor:default; 
 
    color: green; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    
 
    //position: absolute; 
 
} 
 

 
.filter {    
 
    visibility: hidden; 
 
    display: block; 
 
    position: absolute;  
 
    background-color: #f9f9f9; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 2px 6px;   
 
    max-height: 0px; 
 
    z-index: 1000; 
 
    height:auto; 
 
    transition: visibility 200ms, max-height 200ms ease-in-out; 
 
     
 
    //right:0; 
 
} 
 

 
.filter-open { 
 
    display: block; 
 
    max-height: 300px; 
 
    visibility: visible; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<body> 
 

 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>first</th> 
 
     <th> 
 
      second 
 
      <span> 
 
      <i class="context-icon fa fa-lg fa-filter"> 
 
       <select multiple class="filter filter-open"> 
 
       <option >option1</option> 
 
       <option >option2</option> 
 
       <option >option3</option>   
 
       </select> 
 
      </i> 
 
      </span> 
 
     </th> 
 
     <th>third</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 

 
</body>

來源

2016-03-10 09:36:00 vals

請添加CSS：

.filter { 
    right: 50%; 
}

來源

2016-03-10 09:07:54

不起作用。它會移動下拉表格，但不會移動到相對於圖標的正確位置。 –

右對齊下拉菜單從表頭中的圖標

回答

相關問題