将 MDC 单选按钮放在单独的行中

Question

HTML 菜鸟：我正在尝试让表单中的两个 MDC 单选按钮显示在单独的行上（一个在另一个下面）。我试过在不同的地方放置 break 标签，但似乎没有任何效果。

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
    <div class="mdc-form-field">
        <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
            <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
            </div>
        </div><br>
        <label for="radio-1">Radio 1</label>
    </div>
    <div class="mdc-form-field">
        <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
            <div class="mdc-radio__background">
                <div class="mdc-radio__outer-circle"></div>
                <div class="mdc-radio__inner-circle"></div>
            </div>
        </div>
        <label for="radio-2">Radio 2</label>
    </div>
    <br>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>
</html>

我可以使用中断标记使标准单选按钮出现在单独的行中，如下所示：

  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other

如何让这些 radio-1 和 radio-2 出现在不同的行中？

Answer 1

我想你只是在错误的位置进入刹车，它应该在 "mdc-form-fields" 的两个 div 之间：

    <label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
    <div class="mdc-radio">

还有其他带有网格系统的解决方案，但这是最简单的

将 MDC 单选按钮放在单独的行中

Put MDC Radio Buttons on Separate Rows

html

material-design

material-components

mdc-components

material-components-web