Question

我正在尝试获取水平渲染的按钮列表。每行包含两个按钮，左按钮和右按钮。在某些行中，左侧按钮被隐藏（display: none），但右侧按钮仍应显示在该行的右侧。

我正在使用Bootstrap，但找不到合适的款式，所以我想出了自己的款式。我正在努力解决这个问题，即如果左侧按钮被隐藏，则右侧按住左侧的位置并出现在最左侧。我已尝试设置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>

即使左侧按钮被隐藏，如何让正确的按钮始终保持在最右侧？

Answer 1

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，则可以使用ml-auto按钮上的左侧自动边距（right）将其推向右侧。

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

https://www.codeply.com/go/JXxWPZl6tK

Flexbox：保持元素左右

1 个答案: