如何垂直对齐单选按钮
[英]How to vertical align radio buttons
问题描述
所以现在我有一个默认情况下，水平排列的三个单选按钮，而是我希望他们能够垂直对齐。 我该如何以正确的方式做到这一点？
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: inline-flex; align-items: center; cursor: pointer; margin-right: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href = "style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
3 个解决方案
解决方案1
1 2020-11-24 07:55:49
用inline-flex替换inline-flex flex
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: flex; align-items: center; cursor: pointer; margin-right: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href = "style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
解决方案2
0 2020-11-24 08:00:28
代替display: inline-flex; 使用display: table; 在 CSS 中。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.radio {
display: table;
align-items: center;
cursor: pointer;
margin-right: 10px;
}
解决方案3
0 2020-11-24 08:15:31
您也可以使用display:block; 或display:flex; （如答案列表中所述）。
尽量避免将
radio用作选择器类名，因为它是一个关键字，以这种方式使用并不是一个好方法。
小提琴演奏。
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: block; align-items: center; cursor: pointer; margin-left: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
如何在Bootstrap网格和窗体内嵌套和垂直对齐Kendo单选按钮？
[英]How to nest and vertical align Kendo radio buttons inside Bootstrap grid and form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.