使用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將標籤移動到標籤下方

回答

相關問題