CSS忽略兄弟div

Question

我试图实现看起来相当简单的东西,但我不确定是否有办法用css完成它.

我有一个连续显示的标签列表.在下面的小提琴中,我修改了tags-wrapper模拟行包装的大小.

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

实际上我想要做的是忽略tags-wrapperdiv并将我的输入直接放在最后一个tagdiv之后,但是我无法更改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元素以及输入元素.

float CSS属性指定元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流程中删除,但仍然是流程的一部分

( - 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'>