如何构建符合YouTube标签样式的有效HTML布局？

DevOps 小满

2026-7-29

实现YouTube风格的标签输入容器布局

我正在制作一个包含多个标签和可输入新标签的输入框的容器，要求其外观和功能与YouTube的标签表单一致。该布局需包含已添加标签列表，以及一个可填充父容器剩余宽度的隐形输入框。现有HTML代码如下：

<div class="box">
    <ul>
        <li>added tag 1</li>
        <li>added tag 2</li>
    </ul>

    <input type="text" placeholder="input new tag" />
</div>

我将已添加标签设为<ul>内的<li>元素，因为标签本质是列表项，这是最合理的标记方式。当前遇到样式问题：如何让输入框实现YouTube示例中的效果？若给.box设置display: flex、<ul>设置display: inline-flex，输入框会换行而非填充最后一行剩余宽度；将输入框放入<ul>并设置其display: flex虽能实现效果，但不符合HTML规范（<ul>仅可包含<li>）。

解决方案

可以通过以下CSS设置实现需求，同时保持HTML结构的语义化合规：

给.box设置弹性布局并允许换行，让标签和输入框能自动适配行宽
让<ul>以弹性布局展示标签列表，同时设置flex:1让它占据可用空间，输入框自然跟随在列表末尾
给输入框设置flex:1，去除边框样式实现“隐形”效果，同时限制最小宽度避免过窄

完整CSS代码示例：

.box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.box li {
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.box input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 4px 0;
}

效果说明：