如何将flexbox样式应用于单选按钮？

Question

我有一个带有框的Flexbox行。

我想要设置这样的单选按钮，以便检查它们。 这可能吗？

<button type="button" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large" onclick="window.location.href='{% url 'ridesharing:ride-list' %}'">Find a ride</button>

CSS

<ul class="flex-container longhand">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

Answer 1

是的。隐藏输入并使用label属性将其附加到for，然后设置label的样式。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.longhand {
  flex-flow: wrap row;
}
.flex-item {
  color: #C3D0D9;
  border: 1px solid #C3D0D9;
  width: 50px;
  height: 50px;
  font-size: 1.3em;
  text-align: center;
  padding: 10px;
}
label {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
input:checked + label {
  background: #eee;
}
input {
  display: none;
}

<ul class="flex-container longhand">
  <li class="flex-item"><input id="radio1" type="radio" name="radio"><label for="radio1">1</label></li>
  <li class="flex-item"><input id="radio2" type="radio" name="radio"><label for="radio2">2</label></li>
  <li class="flex-item"><input id="radio3" type="radio" name="radio"><label for="radio3">3</label></li>
  <li class="flex-item"><input id="radio4" type="radio" name="radio"><label for="radio4">4</label></li>
  <li class="flex-item"><input id="radio5" type="radio" name="radio"><label for="radio5">5</label></li>
</ul>