顯示一個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>