如何使字段集彼此对齐

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，而不是浮动。另外，在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>