css - 并排显示一个 div 和一个表格

Question

在下面的代码片段中，我想将 clear 按钮(悬停输入以显示)放在表格的右侧，与输入对齐，如下所示:

有没有可能在不改变当前html结构的情况下实现？我已经尝试了很多东西，但无法让它发挥作用。

$(".layer-lookup2").on("mouseover mouseout", function(e) {
	$(".clear-button")[(e.type == "mouseover" ? "show" : "hide")]();
});

.layer-lookup2 {
    width: 100%;
}

.layer-lookup2 table {
    table-layout: fixed;
}

.layer-lookup2 td > div,
.layer-lookup2 span.k-widget {
    max-width: 100px;
}

.layer-lookup2 td > div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.layer-lookup2 td > input {
    max-width: 50px;
}

.layer-lookup2 td > .label {
    padding-left: 5px;
    cursor: pointer;
}

.layer-lookup2 td > .label:hover,
.layer-lookup2 td > .label.hover {
    font-weight: bold;
}

.layer-lookup2 .clear-button {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-lookup2">
  <table>
    <tr>
      <td>
        <div class="label">
          Item #1
        </div>
        <input>
      </td>
      <td>
        <div class="label">
          Item #2
        </div>
        <input>
      </td>
      <td>
        <div class="label">
          Item #3
        </div>
        <input>
      </td>
      <td>
        <div class="label">
          Item #4
        </div>
        <input>
      </td>
    </tr>
  </table>
  <div class="clear-button"><button class="k-button">X</button></div>
</div>

Fiddle version

Answer 1

您可以使用 flexbox 实现此目的.

给你的 .layer-lookup2 display: flex; 和 align-items: flex-end;。如果您希望按钮与输入对齐，您还需要向按钮添加一些填充。

CSS

.layer-lookup2 {
    display: flex;
    align-items: flex-end;
}

.layer-lookup2 .clear-button {
    padding: 4px;
}

JSFiddle