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

试试这个：

inline-block代替block，它允许您删除所有边距和内容

另外，使用div而非span - div是块级元素

<div style="float:right;"><input class="form-control" style="display: inline-block; margin-bottom: 0px;" placeholder="global search ..." type="text" /></div>

<div class="alert alert-success" style="display:inline-block;" role="alert">I don't want this to overlap the search</div>

Here's updated plnkr

Another updated plnkr splitting table

Answer 2

这是一个很好的方法，使用calc()来提出宽度。

请参阅更新的plunkr https://plnkr.co/edit/2KIdmCBjpe3expY5c4LD?p=preview

<span class="alert alert-success" style="display:block;width: calc(100% - 210px)" role="alert">I don't want this to overlap the search</span>

Answer 3

如果你不喜欢保证金，你可以改为计算宽度：

<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

在我看来，最干净的选择是灵活盒式布局，因为它确实是它的用途。

<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

跨度重叠问题

3 个答案: