Question

如何对齐此单选按钮？我需要第二行在单选按钮前停止运行。

<!DOCTYPE html>
    <form>
        <input type="radio" name="bunny" value="bunny"> far far away in a land called neverland there was an easter bunny who hated chocolate and loved vegetables <br>
    </form>
</html>

我的CSS看起来像这样：

input[type="radio"] {
    text-align: justify;
}

http://prntscr.com/j5zzvt

Answer 1

在你的CSS中添加：

form {
    display: flex;
}

并删除它，因为它没用：

input[type="radio"] {
    text-align: justify;
}

Answer 2

您可以通过添加几个css样式使单选按钮的标签与第一行对齐。试试这段代码。

<form>
    <labe class="radio-option">
        <input type="radio" name="bunny" value="bunny"> <span class="label-text">far far away in a land called neverland there was an easter bunny who hated chocolate and loved vegetables</span>
    </label>
</form>

.radio-option input {
    float: left;
    margin-top: 5px;
}
.radio-option .label-text {
    margin-left: 15px;
}

如何对齐HTML和CSS的单选按钮文本？

2 个答案: