-1

HTML Noob here：我试图让表单中的两个 MDC 单选按钮在不同的行上对齐显示（一个在另一个下方）。我曾尝试在不同的地方放置中断标签，但似乎没有任何效果。

<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 出现在不同的行上？

4

1 回答 1

1

我认为您只是在错误的位置进入了刹车，它应该在“mdc-form-fields”的两个 div 之间：

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

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

于 2018-08-01T09:57:24.733 回答