物化中复选框的重叠问题

问题描述 投票：0回答：1

我建立了一个测验网站，并使用“Materialize”进行设计。 现在我遇到的问题是答案的文本相互覆盖。无论文本有多长，复选框之间的距离始终保持不变。

Here is my problem

以下是我的代码

<html><head><title>Coding Project 2</title>

    <!--Import materialize.css-->
    <link rel="stylesheet" href="/materialize/1.0.0/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col s12 form-box">
            <h3 class="center-align">Coding Project 2</h3>
            <form method="post">
                <div class="row">
                    <div class="input-field col s12">
                        <span><b>Question 1:</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</span>
                    </div>
                </div>
                <input type="hidden" id="question" name="question" value="TWO16">
                                    <div class="row">
                        <div class="input-field col s12">
                            <label>
                                <input type="checkbox" name="ans_a" id="ans_a" value="A">
                                <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</span>
                            </label>
                        </div>
                    </div>
                                                        <div class="row">
                        <div class="input-field col s12">
                            <label>
                                <input type="checkbox" name="ans_b" id="ans_b" value="B">
                                <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</span>
                            </label>
                        </div>
                    </div>
                                                        <div class="row">
                        <div class="input-field col s12">
                            <label>
                                <input type="checkbox" name="ans_c" id="ans_c" value="C">
                                <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</span>
                            </label>
                        </div>
                    </div>
                                                                                    <br><br>
                <div class="row">
                    <div class="col s6">
                        <a class="btn red" href="https://example.com/try.php?cancel">Cancel</a>
                    </div>
                    <div class="col s6 right-align">
                        <button class="btn waves-effect waves-light" type="submit" name="submitu" id="submitu">next<i class="material-icons right">send</i>
                        </button>
                    </div>
                </div>
        </form></div>
    </div>    
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="/materialize/1.0.0/js/materialize.min.js">
</script>
</div></body></html>

有人可以帮助我吗？

我已经多次尝试手动更改高度，但我不希望答案始终具有不同的长度。

html css checkbox materialize
1个回答
0
投票

为了让文字内容自动适应高度，请更改所有

<label>xxxxx
</label>

到

<div>xxxxx
</div>

对于您的情况，您需要更改 3 个出现的地方（您有 3 个答案）

您可以在此处查看沙盒中的结果：

https://www.createchhk.com/SOanswers/testSO23Aug2023.html

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.