html - CSS 忽略同级 div

Question

我正在尝试实现一些看起来相当简单的东西，但我不确定是否有办法用 css 完成它。

我有一个连续显示的标签列表。在下面的 fiddle 中，我固定了 tags-wrapper 的大小来模拟行换行。

现在我想做的是在最后一个标签(在同一行)之后直接添加输入。我不确定这是怎么可能的，因为这意味着输入将在 tags-wrapper div 内部(如果我错了，请纠正我，但我认为只有通过绝对定位的 div)。

实际上我想做的是忽略 tags-wrapper div 并将我的输入直接放在最后一个 tag div 之后，但我无法更改我正在使用 Angular 组件开发的 html，输入和 tags-wrapper 位于不同的组件中。

.tags-wrapper{
  width: 210px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tag{
  padding: 2px 3px;
  margin: 1px 2px;
  border: 1px solid black;
}

input{
  width: 60px;
}

<div class='tags-wrapper'>
	<div class='tag'>Basketball</div>
	<div class='tag'>Football</div>
	<div class='tag'>Baseball</div>
</div>
<input placeholder='Search'>

Answer 1

您可以使用 floating 实现此目的.tag 元素以及 input 元素。

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow

(— https://developer.mozilla.org/en-US/docs/Web/CSS/float )

.tags-wrapper {
  width: 210px;
}

.tag {
  padding: 2px 3px;
  margin: 1px 2px;
  border: 1px solid black;
  float: left;
}

input {
  width: 60px;
  height: 18px;
  margin: 1px;
  float: left;
}

<div class='tags-wrapper'>
  <div class='tag'>Basketball</div>
  <div class='tag'>Football</div>
  <div class='tag'>Baseball</div>
</div>
<input placeholder='Search'>