I want to create a page with multiple options (checkboxes). Here's what I got so far:
<fieldset>
<legend>Title here</legend>
<div>
<input type="checkbox" id="1" name="Option 1">
<label for="AG-Wahl">1</label>
</div>
<div>
<input type="checkbox" id="2" name="Option 2">
<label for="AG-Wahl">2</label>
</div>
<div>
<input type="checkbox" id="3" name="Option 3">
<label for="AG-Wahl">3</label>
</div>
<div>
<input type="checkbox" id="4" name="Option 4">
<label for="AG-Wahl">4</label>
</div>
<div>
<input type="checkbox" id="5" name="Option 5">
<label for="AG-Wahl">5</label>
</div>
<div>
<input type="checkbox" id="6" name="Option 6">
<label for="AG-Wahl">6</label>
</div>
<div>
<input type="checkbox" id="7" name="Option 7">
<label for="AG-Wahl">7</label>
</div>
<div>
<input type="checkbox" id="8" name="Option 8">
<label for="AG-Wahl">8</label>
</div>
<div>
<input type="checkbox" id="9" name="Option 9">
<label for="AG-Wahl">9</label>
</div>
<div>
<input type="checkbox" id="10" name="Option 10">
<label for="AG-Wahl">10</label>
</div>
</fieldset>Now I want to put 3 options in one row next to each other, how can I do that?
CodePudding user response：
you can separate the div
<div>
<input type="checkbox" id="1" name="Option 1">
<label for="AG-Wahl">1</label>
<input type="checkbox" id="2" name="Option 2">
<label for="AG-Wahl">2</label>
<input type="checkbox" id="3" name="Option 3">
<label for="AG-Wahl">3</label>
</div>
<div>
<input type="checkbox" id="4" name="Option 4">
<label for="AG-Wahl">4</label>
<input type="checkbox" id="5" name="Option 5">
<label for="AG-Wahl">5</label>
<input type="checkbox" id="6" name="Option 6">
<label for="AG-Wahl">6</label>
</div>
<div>
<input type="checkbox" id="7" name="Option 7">
<label for="AG-Wahl">7</label>
<input type="checkbox" id="8" name="Option 8">
<label for="AG-Wahl">8</label>
<input type="checkbox" id="9" name="Option 9">
<label for="AG-Wahl">9</label>
</div>
<div>
<input type="checkbox" id="10" name="Option 10">
<label for="AG-Wahl">10</label>
</div>CodePudding user response：
One way is to use CSS grid.
This snippet puts your options into a container '.choices' and then tells the grid that it wants 3 columns. The container is given a width - depends on what you want as to what that is. This snippet just gives it a width in terms of character width.
UPDATE: a new requirement is to center the whole set of options. This could be done various ways. The snippet has been altered to use flex on a container. To increase the space between options you can just set a gap.
legend {
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
.choices {
display: grid;
gap: 4em;
grid-template-columns: 1fr 1fr 1fr;
width: 20em;
}<body>
<legend>Title here</legend>
<div >
<div >
<div>
<input type="checkbox" id="1" name="Option 1">
<label for="AG-Wahl">1</label>
</div>
<div>
<input type="checkbox" id="2" name="Option 2">
<label for="AG-Wahl">2</label>
</div>
<div>
<input type="checkbox" id="3" name="Option 3">
<label for="AG-Wahl">3</label>
</div>
<div>
<input type="checkbox" id="4" name="Option 4">
<label for="AG-Wahl">4</label>
</div>
<div>
<input type="checkbox" id="5" name="Option 5">
<label for="AG-Wahl">5</label>
</div>
<div>
<input type="checkbox" id="6" name="Option 6">
<label for="AG-Wahl">6</label>
</div>
<div>
<input type="checkbox" id="7" name="Option 7">
<label for="AG-Wahl">7</label>
</div>
<div>
<input type="checkbox" id="8" name="Option 8">
<label for="AG-Wahl">8</label>
</div>
<div>
<input type="checkbox" id="9" name="Option 9">
<label for="AG-Wahl">9</label>
</div>
<div>
<input type="checkbox" id="10" name="Option 10">
<label for="AG-Wahl">10</label>
</div>
</fieldset>
</div>
</div>
</body>Obviously you will want to play around with the various settings to get the sort of spacing you want.
CodePudding user response：
many ways to achieve this. In my opinion the easiest way to do this would to use the combination of display: inline-block; and width:30%.
Why? Because you need only to add this lines of code without changing your entire html.
fieldset div {
display: inline-block;
width: 30%;
}
fieldset div {
display: inline-block;
width: 30%;
margin:5px;
text-align: center;
}<fieldset>
<legend>Title here</legend>
<div>
<input type="checkbox" id="1" name="Option 1">
<label for="AG-Wahl">1</label>
</div>
<div>
<input type="checkbox" id="2" name="Option 2">
<label for="AG-Wahl">2</label>
</div>
<div>
<input type="checkbox" id="3" name="Option 3">
<label for="AG-Wahl">3</label>
</div>
<div>
<input type="checkbox" id="4" name="Option 4">
<label for="AG-Wahl">4</label>
</div>
<div>
<input type="checkbox" id="5" name="Option 5">
<label for="AG-Wahl">5</label>
</div>
<div>
<input type="checkbox" id="6" name="Option 6">
<label for="AG-Wahl">6</label>
</div>
<div>
<input type="checkbox" id="7" name="Option 7">
<label for="AG-Wahl">7</label>
</div>
<div>
<input type="checkbox" id="8" name="Option 8">
<label for="AG-Wahl">8</label>
</div>
<div>
<input type="checkbox" id="9" name="Option 9">
<label for="AG-Wahl">9</label>
</div>
<div>
<input type="checkbox" id="10" name="Option 10">
<label for="AG-Wahl">10</label>
</div>
</fieldset>CodePudding user response：
Try using this way if you are using bootstrap
<form>
<div>
<label for="option1" >
<input type="checkbox" id="1" name="option1">1
</label>
<label for="option2" >
<input type="checkbox" id="2" name="option2">2
</label>
<label for="option3" >
<input type="checkbox" id="3" name="option3">3
</label>
</div>
<div>
<label for="option4" >
<input type="checkbox" id="4" name="option4">4
</label>
<label for="option5" >
<input type="checkbox" id="5" name="option5">5
</label>
<label for="option6" >
<input type="checkbox" id="6" name="option6">6
</label>
</div>
<div>
<label for="option7" >
<input type="checkbox" id="7" name="option7">7
</label>
<label for="option8" >
<input type="checkbox" id="8" name="option8">8
</label>
<label for="option9" >
<input type="checkbox" id="9" name="option9">9
</label l>
</div>
<label for="option10" >
<input type="checkbox" id="10" name="option10"> 10
</label>
</form>