Question

首先，对这个奇怪的措词感到抱歉。我的问题是，当标签溢出容器时，您将再也看不到搜索了，我希望它可以将搜索中的所有内容移回并像下面的图片一样将搜索向前滑动

实际情况

https://gyazo.com/6c0e0064ad13d9fe4cfd6e05c20c72e8

我的html代码

 <div id = "home-search" class="searchbar">
    <span class = "taglist">
        <!-- these are just mvc tag helpers -->
        <Tag tag-text = "sql-server"></Tag>
        <Tag tag-text = "CSharp"></Tag>
        <Tag tag-text = "life-drawing"></Tag>
        <Tag tag-text = "game-dev"></Tag>
    </span>
    <span class = "searchbox"><input class = "" placeholder="Search..." name=""></span>
 </div>

Answer 1

看看新问题标记框如何在SO上工作，当它过大时，它似乎将左边距设置为-ve。

您已经对输入UI（框），标记容器和实际输入有了很好的区分。

实现此目标的一种方法是检查.searchbox的左侧位置（相对于.searchbar），如果超过一定量（75％或50％，或更精确的100px），则减去搜索栏宽度从左边缘开始的宽度（使用px可以使此操作更容易且更一致）。

每次.searchbox偏右时都要重复。

您可以检查.input或标签是否完整，具体取决于要求/您喜欢/喜欢的感觉。

Answer 2

在将您键入的内容转换为标签触发器的事件中，您可以添加

var lastTagSize = $('tag','.taglist').last().width();
$('tag','.taglist').first().css('margin-left','-' + lastTagSize);

因此，我只是简单地拾取新标签的宽度并将其细分为第一个标签的左边距。

实现类似stackoverflow的标签搜索栏的问题？

2 个答案: