并排显示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

Answer 2

您可以浮动桌子并为按钮添加一点填充：

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

.layer-lookup2 {
    width: 100%;
}

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

.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;
  padding-top:20px;
}

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