Question

HTML Noob在这里：我试图使两个MDC单选按钮以一种形式显示，以对齐在单独的行上（一个在另一个行下面）。我曾尝试将break标签放在各个地方，但似乎没有任何效果。

 class ButtonGoToScannerClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                ActivityCompat.requestPermissions(BaseMapActivity.this,
                        new String[]{Manifest.permission.CAMERA},
                        1);
                Intent intent = new Intent(BaseMapActivity.this, BarCodeReaderActivity.class);
                startActivityForResult(intent, ITEM_LOCATION_REQUEST);
            }
        }
    }

我可以使用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>

如何使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单选按钮放在单独的行上

1 个答案: