单选按钮的标签对齐

debugcn 发表于 Dev

Yuniac

我试图使居中表单中的单选按钮列表对齐。我已经找到了一个建议使用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>

杰拉德

请参阅下面的内容，使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。