谁能告诉我如何使ng-input-tag(Angular)在X方向上滚动。
目前,如果我插入标签,则div的高度会增加。
我想要的是,如果我继续插入标签,那么它应该在X方向上滚动

我努力了:
宽度:自动;高度:34像素; overflow-x:自动; overflow-y:隐藏;空白:nowrap;
但是它没有按预期工作

所以让我知道我错了。

最佳答案

我知道这很晚了,但是最近我没有看到类似的问题,而这个问题在Google搜索此问题的顶部。这可以仅使用CSS来完成。如果您想增加视觉效果,请尝试自定义滚动条。

对于X方向:

如果您决定在标签上设置最小宽度或最小宽度,这可能会有点难看。

我发现在X方向上做到这一点的唯一方法是使用flexbox:

tags-input .tags .tag-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

tags-input .tags .tag-item {
    /* Applying this display class */
    display: inline-table;

    /* OR set the tag width to ensure that the text is visible */
    min-width: 150px; /* Could also use width: 123px */
}


This Github issue is also directly related to the problem.

对于Y方向:

将固定高度应用于.tags类并将overflow-y设置为滚动将为您提供所需的结果:

.tags {
    height: 34px;
    overflow-y: scroll;
}

10-05 20:50
查看更多