CSS 忽略同胞 div

Question

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

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

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

实际上我想做的是忽略 tags-wrapper div 并将我的输入直接放在最后一个 tag div 之后，但我不能不要更改 html，因为我正在使用 angular 组件进行开发，输入和 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

将此添加到您的 css：

display: inline;

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

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

input{
  width: 60px;
  display: inline;
}

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

Answer 2

您可以使用 floating 和 .tag 元素以及输入元素来实现此目的。

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

CSS 忽略同胞 div

CSS Ignore sibling div

html

css

position

css-float