html - 如何将 div 框与彼此相邻的文本对齐

Question

如何让 div 框和文本并排在一起？请检查代码片段，预期的 div 框，右侧有文本，每个 div 框在 1 行中彼此相邻。

.foo {

  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E

Answer 1

Flexbox 是新的(或多或少)令人兴奋的，是您处理这种情况的 friend 。

你会看到我添加了一堆 <span>同类.flex在我定义的 css 中 .flex作为

.flex {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}
.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #461A3F;
  border-radius: 2px;
  border: 0px;
}
.brown {
  background: #C58E4D;
  border-radius: 2px;
  border: 0px;
}
.black {
  background: #34332E;
  border-radius: 2px;
  border: 0px;
}
.orange {
  background: #EC4535;
  border-radius: 2px;
  border: 0px;
}
.blue {
  background: #62a8ea;
  border-radius: 2px;
  border: 0px;
}
.red {
  background: #E2001C;
  border-radius: 2px;
  border: 0px;
}

<span class="flex">
  <span class="flex">
    <div class="foo purple"></div>
    TEST A
  </span>
<span class="flex">
    <div class="foo brown"></div>
    TEST B
  </span>
<span class="flex">
    <div class="foo black"></div>
    TEST C
  </span>
<span class="flex">
    <div class="foo orange"></div>
    TEST D
  </span>
<span class="flex">
    <div class="foo red"></div>
    TEST E
  </span>
</span>