Vaadin - 在CSSLayout中對齊元素

我得到了一個CSSlayout，其中有三個元素，如標籤，標籤和無界按鈕（X），用作圖標。我已經設置了setSizeUndefined，我想有一個佈局，如：帶額外空間的標籤，因爲標籤的大小可以是0像素到200像素。然後我需要另一個標籤，然後對齊到最右邊的刪除按鈕，像X.我真的不能那樣做，煩人。這應該也適用於移動設備，所以我認爲固定尺寸並不是一個好主意。浮動權不能正常工作與按鈕圖標...Vaadin - 在CSSLayout中對齊元素

<div class="v-csslayout v-layout v-widget"> 
    <div class="v-label v-widget uploadedRow-fileName v-label-uploadedRow-fileName v-label-undef-w">logo.jpg</div> 
    <div class="v-label v-widget uploadedRow-description v-label-uploadedRow-description v-label-undef-w">Description1</div> 
     <div style="width: 1px;" id="logo.jpg" class="v-button v-widget icon-only v-button-icon-only borderless v-button-borderless uploadedRow-deleteButton v-button-uploadedRow-deleteButton v-has-width" role="button" tabindex="0"><span class="v-button-wrap"><span class="v-icon FontAwesome"></span><span class="v-button-caption"></span></span></div> 
    </div>

來源

2017-01-03 Sami

爲什麼你有1px的按鈕寬度？似乎沒有必要。如果可以的話，我建議你使用flexbox來對齊項目。如果你不能（因爲瀏覽器支持），那麼絕對定位可能適用於你的情況。 – Jouni

嘗試添加浮動權的關閉按鈕。

<div style="width: 1px; float: right;" id="logo.jpg" class="v-button v-widget icon-only v-button-icon-only borderless v-button-borderless uploadedRow-deleteButton v-button-uploadedRow-deleteButton v-has-width" role="button" tabindex="0"><span class="v-button-wrap"><span class="v-icon FontAwesome"></span><span class="v-button-caption"></span></span></div>

來源

2017-01-03 15:26:55

像我說的問題，它不工作，我不知道爲什麼。 .v-button-uploadedRow-deleteButton { \t margin-top：-1px; float：right;} – Sami

我試着添加新的水平佈局，但其中的按鈕。它以固定大小以某種方式工作，但沒有響應。 – Sami

Vaadin - 在CSSLayout中對齊元素

回答

相關問題