Question

我想打开一个下拉菜单，该菜单与图标下方的右侧对齐，该图标显示在表格标题的span中。

这就是我得到的：

它在图标下方自然地对齐左，但我无法找到将其与正确对齐的好方法。

这就是我真正想要的：

Some suggestions建议使用right:0;并将过滤器容器定位为absolute。这在我的情况下并不好，因为我希望表头单元格中的图标与单元格的右侧对齐。将容器设置为absolute会使表标题中的图标难以对齐。

如果可能，我正在寻找纯CSS解决方案。表格单元格的宽度和下拉菜单的宽度是不固定，因此我无法通过指定＆＃34;像素＆＃34;来对齐事物。

＆＃13;

table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;	
	background:#eaebec;
	margin:20px;
	border:black 1px solid;	
	border-radius:3px;	
	border-collapse: collapse;
	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;
}

＆＃13;

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

＆＃13;

Answer 1

我已经相对于i添加了位置，而右边的0px添加到了选择：

＆＃13;

i {
  position: relative;
}
i select {
  right: 0px;  
}

table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;	
	background:#eaebec;
	margin:20px;
	border:black 1px solid;	
	border-radius:3px;	
	border-collapse: collapse;
	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;
}

＆＃13;

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

＆＃13;

Answer 2

请在下面添加css：

.filter {
    right: 50%;
}

从表头中的图标右键对齐下拉菜单

2 个答案: