Vaadin - 在 CSSLayout 中对齐元素答案

【问题标题】：Vaadin - aligning elements in CSSLayoutVaadin - 在 CSSLayout 中对齐元素
【发布时间】：2017-01-03 15:18:38
【问题描述】：

我有一个 CSSlayout，其中三个元素，如标签、标签和无边框按钮 (X)，像图标一样使用。我已经设置了 setSizeUndefined 并且我想要这样的布局：带有额外空间的标签，因为标签的大小可以是 0 像素到 200 像素。然后我需要另一个标签，然后与最右边的删除按钮对齐，比如 X。我真的做不到，烦人。这也应该适用于移动设备，所以我认为固定尺寸并不是一个好主意。向右浮动不适用于按钮图标...

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

【问题讨论】：

为什么按钮的宽度是 1px？似乎没有必要。如果可以的话，我建议你使用 flexbox 来对齐项目。如果你不能（因为浏览器支持），那么绝对定位可能适用于你的情况。

标签： java css layout vaadin

【解决方案1】：

尝试在关闭按钮右侧添加浮动。

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

【讨论】：

就像我在问题中所说的那样，它不起作用，我不知道为什么。 .v-button-uploadedRow-deleteButton{ margin-top: -1px;浮动：右；}
我尝试添加新的水平布局，但其中的按钮。它以某种方式以固定大小工作，但没有响应。