使用CSS flexbox将单选框移动到标签下方

Question

我不能修改这个html的输出，但我可以使用CSS来移动项目。我看到了这个，知道我可以用它来移动元素，但是我想让项目符号移动到单词下面，并把它们都居中。我试图让它看起来像这样使用html在这一个。这是我目前看到的

#edit-submitted-recommendation {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}
.form-radio {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.option {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

Answer 1

我会尝试这样做。这是一个but off，因为最好的情况是交换标签的位置和输入的div，但如果你只能编辑css，这是可行的

div.form-item{
    display:inline-block;
}
div.form-item input{
    display:block;
    margin: 0 auto;
}
div.form-item label{
    display:block;
    text-align:center;
    margin-top:-40px;
}

Answer 2

• 将.form-items设置为内嵌柔性盒，并将flex-flow设置为column。
• 使用order将标签放在上面。
• 将标签和输入居中

这将使标签位于按钮顶部并居中。通过在选项周围使用一些空白来使它看起来更好一些。现在看起来应该像这样: