内的Div对齐<th>

Question

您好，我在中的div对齐有问题。

我做了一个小提琴来显示问题。 https://jsfiddle.net/jpq7xzoz/

我使用jQuery tablesort-Plugin并在第二个div中在标题中显示一些按钮。 例如，用于显示/隐藏过滤器的搜索图标。

<th class="header" style="text-align: center">
     <div class="header-inner">Patchlevel</div>
     <div class="header-inner-filter">
          <button class="filterButton"></button>
     </div>
</th>

但是，当列的大小不同时，表将对cols和div使用自动调整大小，并将按钮换行到新行。 但标题说明应与按钮和背景图片位于同一行。

当我在与描述相同的div中使用按钮时，它们位于同一行，但是我无法将按钮设置在右列。

我尝试使用不同的显示样式和withe-space属性，但没有成功。

我能做什么？

费克斯（Thx Felix）

Answer 1

您可以使用display: table-cell而不是floats ：

 table { background-color: #fff; margin: 10px 0 15px; text-align: left; } .header { background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); background-repeat: no-repeat; background-position: center right; padding: 4px 18px 4px 4px; white-space: nowrap; cursor: pointer; } .header-inner-filter { display: table-cell;/*remove float and add table-cell*/ height: 20px; vertical-align: middle; } .header-inner { display: table-cell;/*remove float and add table-cell*/ } .filterButton { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTMh2EGulWQZP/e0q2sLCOSe6CU177ig+KNhkUobp6MyBW9N6N/ZjVXrvfDAj7QNTEolytS/wq89ROEsmSacLYsI80WygNAsPpknnHryC/EXoeLKpmsfAAAAAElFTkSuQmCC'); width: 20px; height: 20px; background-repeat: no-repeat; border: none; background-color: Transparent; cursor: pointer; } table, th, tr, td { border: 1px solid; border-collapse: collapse; margin-top: 3px; margin-bottom: 3px; } 

 <table> <THEAD> <tr> <th class="header" style="text-align: center"> <div class="header-inner">Patchlevel</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Patcheintrag</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Informationen</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Handulungsempfehlung</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> </tr> </THEAD> <TBODY> <tr> <td style="text-align: center">3</td> <td style="text-align: center">1</td> <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> </TBODY> </table> 

Answer 2

将.header-inner和.header-inner-filter为display:inline-block

 table { background-color: #fff; margin: 10px 0 15px; text-align: left; } .header { background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); background-repeat: no-repeat; background-position: center right; padding: 4px 18px 4px 4px; white-space: nowrap; cursor: pointer; } .header-inner-filter { display: inline-block; height: 20px; padding-left: 50px; } .header-inner { display: inline-block; } .filterButton { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0ICQMB9xQAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAABl0RVh0U29mdHdhcmUATWljcm9zb2Z0IE9mZmljZX/tNXEAAADuSURBVDjLnZShDsIwEIYnJyeRSByTyEkkElm5x1jVJHJykkdAIieRk8hJJIIQuIbb8qfp9diWfO7v1/Z6t8RamyD0HYiauDInwvi5EChZERfiI9ARG1XGokdENPIkCk3mn6gh9m4hXxk3uhNpUMY1iu5M35oYIFdLskYLcdBg/STZDUJFRJbhDSRZD6E8IkuxrpLsDKEyIttBrpdkJYRckTMh2EGulWQZP/e0q2sLCOSe6CU177ig+KNhkUobp6MyBW9N6N/ZjVXrvfDAj7QNTEolytS/wq89ROEsmSacLYsI80WygNAsPpknnHryC/EXoeLKpmsfAAAAAElFTkSuQmCC'); width: 20px; height: 20px; background-repeat: no-repeat; border: none; background-color: Transparent; cursor: pointer; vertical-align: top; } table, th, tr, td { border: 1px solid; border-collapse: collapse; margin-top: 3px; margin-bottom: 3px; } 

 <table> <THEAD> <tr> <th class="header" style="text-align: center"> <div class="header-inner">Patchlevel</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Patcheintrag</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Informationen</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> <th class="header" style="text-align: center"> <div class="header-inner">Handulungsempfehlung</div> <div class="header-inner-filter"> <button class="filterButton"></button> </div> </th> </tr> </THEAD> <TBODY> <tr> <td style="text-align: center">3</td> <td style="text-align: center">1</td> <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> </TBODY> </table> 

Answer 3

嘿！ 尝试使用负边距。 例如：

.header-inner {margin-right:50px;}
.header-inner-filter {margin-left:-40px;}

根据需要调整50px和-40px。

Answer 4

更改两个div的CSS。

.header-inner-filter {
    height: 20px;
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-left: 5px;
}
.header-inner {
    display: inline-block;
    width: 70%;
    vertical-align: top;
}

小提琴