內的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;
}

小提琴