显示一个div和侧

Question

表侧在片段下面我想表的右侧把明确按钮（悬停输入来显示），与输入一致，就像这样：

在不改变当前html结构的情况下可以实现这一点吗？我已经尝试了很多东西，但无法启动它。

$(".layer-lookup2").on("mouseover mouseout", function(e) { 
 
\t $(".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 a 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) { 
 
\t $(".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>