I have built a website that is a quiz and designed it with "Materialize". Now I have the problem that the texts of the answers overwrite each other. The distance between the checkboxes always stays the same, no matter how long the text is.
The following is my code
<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>
Can anyone help me?
I have already tried to change the height manually several times, but I don't want the answers to always be of different lengths.
Aucun commentaire:
Enregistrer un commentaire