如何将标签文本与单选按钮对齐

Question

每个单选按钮的标签对齐，直到标签文本未显示在一行上。我想要对齐to look like this。但是，在小屏幕上查看时，当前看起来像this。

这会将数据从MySQL数据库输出到单选按钮。

<?php
$stmt = mysqli_prepare($link, "SELECT id, name, price FROM cases ORDER BY price");
$stmt->execute();
$stmt->bind_result($case_id, $case_name, $case_price);
while($stmt->fetch()) {
echo '<li>
<input id="'.$case_id.'" name="config-prod" value="'.$case_id.'" type="radio">
<label class="sub-label" for="'.$case_id.'">'.$case_name.'         [£'.$case_price.']</label>
</li>';
}
$stmt->close();
?>

CSS：

label {
    margin-top: 5px;
    color: #cfcfcf;
}

.input-list {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
    .input-list li input {
        margin-right: 22px;
    }
        .input-list li input:checked + label {
            color: rgb(255, 255, 255);
            font-weight: 700;
            font-size: 17px;
            transition: color 0.5s ease;
        }

我该如何实现？谢谢。

Answer 1

提供订单项display: flex。我刚刚添加了这个：

.input-list li {
  display: flex;
}

label {
  color: #cfcfcf;
}

.input-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.input-list li {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.input-list li input {
  margin-right: 22px;
}

.input-list li input:checked+label {
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 17px;
  transition: color 0.5s ease;
}

<ul class="input-list">
  <li>
    <input id="1" name="config-prod" value="1" type="radio">
    <label class="sub-label" for="1">One</label>
  </li>
  <li>
    <input id="2" name="config-prod" value="2" type="radio">
    <label class="sub-label" for="2">Two</label>
  </li>
  <li>
    <input id="3" name="config-prod" value="3" type="radio">
    <label class="sub-label" for="3">Three, a really long one... Really, really, really, really, really, really, really, really, really, really, really, really, really, really, really, really long...</label>
  </li>
  <li>
    <input id="4" name="config-prod" value="4" type="radio">
    <label class="sub-label" for="4">Fourth</label>
  </li>
</ul>