Flexbox:保持元素的左和右
Flexbox:保持元素的左和右
提问于 2018-04-07 12:16:27
我试着得到一个水平显示按钮的列表。每一行由两个按钮组成，一个左按钮和一个右按钮。在某些行中，左侧按钮是隐藏的(display: none)，但右侧按钮仍应出现在行的右侧。
我用的是鞋带，但找不到合适的款式，所以我想出了自己的款式。我的问题是，如果左边的按钮是隐藏的，右边的按钮就会出现在最左边的位置上。我尝试过设置order: 0 (左边按钮)和order: 1 (右侧按钮)，但这并没有什么区别。
.align-horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
}html：
<tr>
<td>
<div class='align-horizontal'>
<button>left</button>
<button style='display: none'>right</button>
</div>
</td>
</tr>
<tr>
<td>
<div class='align-horizontal'>
<button>left</button>
<button>right</button>
</div>
</td>
</tr>
<tr>
<td>
<div class='align-horizontal'>
<!-- this is where the layout breaks and the right button moves to the left -->
<button style='display: none>left</button>
<button>right</button>
</div>
</td>
</tr>即使左边的按钮是隐藏的，我怎样才能让右边的按钮始终保持在最右边呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-07 12:26:29
只有当显示了两个元素时，Flexbox justify-content:between才能工作。解决办法是让左边的按钮visiblity:hidden而不是display:none.
<tr>
<td>
<div class='align-horizontal d-flex w-100 justify-content-between'>
<button class="invisible">left</button>
<button>right</button>
</div>
</td>
</tr>如果必须使用display:none，另一个选项是使用right按钮上的左自动边距(ml-auto)将其按到右侧。
<tr>
<td>
<div class='align-horizontal d-flex justify-content-between'>
<button class="d-none">left</button>
<button class="ml-auto">right</button>
</div>
</td>
</tr>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49707296
复制相关文章
相似问题
腾讯云开发者
