Question

我想有一个标签输入（就像stackoverflow的一样），用户可以在其中输入所选标签，并在输入中显示。我决定在输入为最后一个li的ul内部进行操作：

  <ul class="tag-box">
    <li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
    <li class="new-tag"><input class="input-tag" type="text"></li>
  </ul>

但是问题是输入的宽度默认情况下总是很小，而我希望它采用所有剩余的宽度：

我的CSS：

.tag-box {
  list-style: none;
  padding: 3px;
  margin: 0;
  display: inline-block;
  font-family: arial;
  width: 100%;
  border: 1px solid #F39F19;
  border-radius: 4px;
}
.tag-box li {
  padding: 4px 6px;
  float: left;
  display: inline-block;
}
.tag-box li.tags {
  background: #F1C617;
  color: #fff;
  border-radius: 4px;
  margin: 4px 3px;
  position: relative;
}
.tag-box li .input-tag {
  color: #000;
  height: 24px;
  vertical-align: middle;
  border: none;
  outline: none;
  background: none;
}

有没有一种方法可以使输入的内容根据循环的大小取余下的宽度？

Answer 1

这是您可以做到的一种方法，我要添加3件事。您最终将要给它一个min-width并使其包裹。

.tag-box {
  display: flex;
}
.tag-box .new-tag {
  flex: 1
}
.tag-box li .input-tag {
  width: 100%;
}

文本输入的宽度为

1 个答案: