html - 跨度重叠问题

Question

大家好，我在让我的跨度按我想要的方式工作时遇到了一些问题。我在表格标题中有一个警报和一个搜索输入框，我希望搜索框向右浮动，警报填充搜索框左侧的其余空间。在附加的 plunker 中，我已经开始通过设置搜索框的宽度然后在警报上放置一个匹配的右边距来工作，但这似乎是一种非常肮脏的方式。

<span style="float:right;"><input class="form-control" style="margin-bottom: 0px;width:200px;" placeholder="global search ..." type="text" /></span>
<span class="alert alert-success" style="display:block;margin-right:210px;" role="alert">I don't want this to overlap the search</span>

有谁知道更好的方法来完成这个？这是我的 plunkr 的链接

Answer 1

如果你不喜欢边距，你可以计算宽度:

<th colspan="6">
  <span style="float:right;"><input class="form-control" style="margin-bottom: 0px;width:200px;" placeholder="global search ..." type="text" /></span>
  <span class="alert alert-success" style="display:block;width:calc(100% - 210px);" role="alert">I don't want this to overlap the search</span>
</th>

https://plnkr.co/edit/Aq45ZTXzR6i1vDEWEhSj?p=preview

在我看来，最简洁的选择是 flex 盒布局，因为这正是它的用途。

<th colspan="6">
  <div style="display:flex;align-items: stretch;justify-content: space-between;">
    <span class="alert alert-success" style="display:block;flex:1;margin-right:10px;" role="alert">I don't want this to overlap the search</span>
    <input class="form-control" style="margin-bottom: 0px;width:200px" placeholder="global search ..." type="text" />
  </div>
</th>

https://plnkr.co/edit/Aq45ZTXzR6i1vDEWEhSj?p=preview