单选按钮的垂直列表

Question

不知何故Material Design Lite 仅在文档中给出了水平单选按钮的示例：https://getmdl.io/components/index.html#toggles-section/radio

如果你想移动，这还不够，而且你的标签有几个字长。

无论如何，这是一个代码笔：http://codepen.io/anon/pen/oBKPeY

我试图用 <br> 分隔项目并将它们包装在 <p> 中，但它没有帮助。我想一些忍者 css 技巧可以解决它。

Answer 1

如果我对你的理解是正确的，你可以修改 mdl-radio 在移动设备上的样式规则：

.mdl-radio {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  display: block;
  vertical-align: middle;
  box-sizing: border-box;
  height: 24px;
  margin: 0;
  padding-left: 0;
  margin-bottom: 32px;
}

通知display: block & margin-bottom: 32px.

单选按钮的垂直列表

Vertical list of radio buttons

css

material-design-lite