如何将字段集并排排列

Question

这是我一直在尝试的对齐它们的尝试，我也搜索了StackOverflow，但仍然无法。我必须像图片中一样对齐它们。当我这样做时，单选按钮和文本会流到其他地方。请帮帮我，我是初学者，请友善！

#text {
font-family: sans-serif;
font-size: 1em;
color: #000;
text-decoration: none;
}
#f1 {
width: 68px;
display: inline-block;
}
#f2 {
width: 229px;
left: 151px;
float: right;
top: 0px;
display: inline-block;
vertical-align: top;
}
input {
margin: 4px;
}
label {
}

<div style="width:900px; height:4px">
<fieldset id="f1">
<legend>Font Size</legend>
<input type="radio" name="font-size" id="size-1" value=".5em">
<label for="size-1">.5em</label>
<input type="radio" name="font-size" id="size-2" value="1em" checked>
<label for="size-2">1em</label>
<input type="radio" name="font-size" id="size-3" value="2em">
<label for="size-3">2em</label>
<input type="radio" name="font-size" id="size-4" value="3em">
<label for="size-4">3em</label>
</fieldset>
</div> 
<div style="width:26%; top:0px;float:left;">
<fieldset id="f2">
<legend>Other Font Features</legend>
<input type="checkbox" name="features" id="italic" value="italic">
<label for="italic">Italic</label>
<input type="checkbox" name="features" id="underline" value="underline">
<label for="underline">Underline</label>
<input type="checkbox" name="features" id="small-caps" value="small-caps">
<label for="small-caps">Small-caps</label>
</fieldset>
</div>
<fieldset id="f3">
<legend>Font Color</legend>
<input type="radio" name="font-color" id="color-1" value="red">
<label for="color-1">Red</label>
<input type="radio" name="font-color" id="color-2" value="green">
<label for="color-2">Green</label>
<input type="radio" name="font-color" id="color-3" value="blue">
<label for="color-3">Blue</label>
<input type="radio" name="font-color" id="color-4" value="pink">
<label for="color-4">Pink</label>
</fieldset>
<div id="text">
THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER TO ORIGINATE ANYTHING. IT CAN DO WHATEVER WE KNOW HOW TO ORDER IT TO PERFORM. ADA LoVELACE, THE WORLD'S FIRST COMPUTER PROGRAMMER
</div>
<button type="button" id="done">Done</button>

它应该是这样的在此处输入图像描述

Answer 1

我为您制作了如您所见的内联样式。只需添加其他字体功能和字体颜色。此外，最好使用flex，而不是float。另外，在div中添加您的输入和标签，使它们居中。只需将该代码复制到VSC中即可查看结果。

<div style="display:flex; align-items:flex-start; flex-direction: column;">

<h1>Make your font selections and click Done</h1>

<div style="display: flex; align-items: center; justify-content: center;" class="fieldset-wrapper">
<div>
<fieldset style="display: flex; align-items:center; flex-direction: column; " id="f1">
<legend>Font Size</legend>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-1" value=".5em">
<label for="size-1">.5em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-2" value="1em" checked>
<label for="size-2">1em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-3" value="2em">
<label for="size-3">2em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-4" value="3em">
<label for="size-4">3em</label>
</div>
</fieldset>
</div>
<div>
<fieldset style="display: flex; align-items:center; flex-direction: column; " id="f1">
<legend>Font Size</legend>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-1" value=".5em">
<label for="size-1">.5em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-2" value="1em" checked>
<label for="size-2">1em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-3" value="2em">
<label for="size-3">2em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-4" value="3em">
<label for="size-4">3em</label>
</div>
</fieldset>
</div>
<div>
<fieldset style="display: flex; align-items:center; flex-direction: column; " id="f1">
<legend>Font Size</legend>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-1" value=".5em">
<label for="size-1">.5em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-2" value="1em" checked>
<label for="size-2">1em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-3" value="2em">
<label for="size-3">2em</label>
</div>
<div style="display:flex; align-items: center;">
<input type="radio" name="font-size" id="size-4" value="3em">
<label for="size-4">3em</label>
</div>
</fieldset>
</div>
</div>
<button style="margin-top:12px;" type="button" id="done">Done</button>
<div style="margin-top:12px; max-width: 800px; text-decoration:underline; color:red;" id="text">
THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER TO ORIGINATE ANYTHING. IT CAN DO WHATEVER WE KNOW HOW TO
ORDER
IT TO PERFORM. ADA LoVELACE, THE WORLD'S FIRST COMPUTER PROGRAMMER
</div>
</div>