单选按钮的标签对齐

Question

我试图在居中表单内左对齐单选按钮列表。我已经找到了一个 similar question 建议使用 display: inline-block 但似乎没有任何效果并且仍然对齐页面左侧的单选按钮。它目前呈现为：

O Rainbow butterfiles O Brimstone  [Find more about it!]

但我希望它看起来像这样：

     O Rainbow butterfiles 
     O Brimstone  
     [Find more about it!]

这是我一直在使用的 HTML 和 CSS：

.list {
  text-align: center;
  display: inline-block;
}
.item {
  text-align: left;
  display: inline-block;
}

<html lang="en">

<body>
  <form action="https://www.google.com/search">
    <div class="list">
      <div class="item">
        <input type="radio" name="q" id="common" value="rainbow butterflies">
        <label for="rainbow">Rainbow Butterflies</label>
      </div>
      <div class="item">
        <input type="radio" name="q" id="common" value="brimstone">
        <label for="brimstone">Brimstone</label>
      </div>
      <button type="submit">Find more about it!</button>
    </div>
  </form>
</body>

Answer 1

试试 flex

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

Answer 2

请看下面，使用 flexbox

form {
  display: flex;
  justify-content: center; /* Center on page */
}

.list {
  display: flex;
  flex-wrap: wrap; /* Will cause items/button to go to next line */
}

.item {
  width: 100%;
}

<form action="https://www.google.com/search">
  <div class="list">
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="rainbow">Rainbow Butterflies</label>
    </div>
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="brimstone">Brimstone</label>
    </div>
    <button type="submit">Find more about it!</button>
  </div>
</form>

单选按钮的标签对齐

Radio button's label alignment

css

radio