Flexbox:保持元素的左和右
Flexbox:保持元素的左和右
提问于 2018-04-07 04: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 04: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
复制
![[c++11]左值、左值引用，右值，右值引用](https://developer.qcloudimg.com/http-save/yehe-1530034/cd2742997de7aaaaa3284059e44b5403.jpg)
相似问题
CSS3 FLEXBOX，左和右浮动项
位置元素(左和右)
如何使用flexbox构建布局？(浮动:左|右)
获取固定的左元素和流体右元素
CSS保持两个DIVs左和右？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
