如何对齐彼此相邻的字段集

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 中添加您的输入和 label 以使它们居中。 只需将该代码复制到您的 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>