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

-3

我无法修改此html的输出，但我可以使用CSS来移动项目。我看到this，并且知道我可以使用它移动元素，但是我希望子弹移动到文字下方并居中。我想让它看起来像this使用此one中的html。这是我迄今为止使用CSS flexbox将标签移动到标签下方

#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; 
}

来源

2015-10-06 PurpleAnarchist

我会尝试这样的事情。这是一个不过关，因为最好的情况下将被交换在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; 
}

来源

2015-10-06 20:37:46 Benneb10

让您.form-items直列flexboxes并设置flex-flow到column。
使用order将标签置于顶部。
居中您的标签和输入。

这会获取按钮顶部的标签并居中它们。通过用一些空格来包围选项使其看起来更好看一些。 It should now look like somewhat like this.

来源

2015-10-06 22:05:12 woestijnrog

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

回答

相关问题