HTML CSS :如何在一行中排列箭头、复选框和标题？

<div class="container">
  <div class="arrow">箭头</div>
  <div class="checkbox">复选框</div>
  <div class="title">标题</div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐子元素 */
}

.arrow, .checkbox, .title {
  margin: 5px; /* 调整子元素之间的间距 */
  padding: 10px; /* 调整子元素的内边距 */
}

.arrow {
  flex-grow: 0; /* 不自动拉伸 */
  flex-shrink: 0; /* 不自动收缩 */
}

.checkbox {
  flex-grow: 1; /* 自动拉伸填充剩余空间 */
}

.title {
  flex-grow: 0; /* 不自动拉伸 */
  flex-shrink: 0; /* 不自动收缩 */
}

<div class="container">
  <div class="arrow">箭头</div>
  <div class="checkbox">复选框</div>
  <div class="title">标题</div>
</div>

.container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列网格 */
  align-items: center; /* 垂直居中对齐子元素 */
  grid-gap: 10px; /* 调整子元素之间的间距 */
}

.arrow, .checkbox, .title {
  padding: 10px; /* 调整子元素的内边距 */
}