javascript - 无法理解如何使用 CSS 格式化 HTML 页面

问题描述

所以我需要让我的页面看起来像下面这样减去顶部的日期和标志，但我不明白如何使这些框不会像那样堆叠以及如何让下拉列表彼此并排。任何帮助表示赞赏我正在学习。

它应该是什么样子：

它应该是什么样子

我的样子：

我的长什么样

fieldset {
    width: 200px;
    box-sizing: border-box;
    margin: auto;
}

select {
    width: 200px;
    box-sizing: border-box;
    margin: auto;
}

<!DOCTYPE html>
<html>
    <head>
        <script src="date.js" type="text/javascript"></script>
        <title>USA/EU Date and Time selector</title>
        <link href="date.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        
        <div id="main">
        <fieldset id="format">
            <legend>Format</legend>
            <label><input id="us" type="radio" name="format" value="US"/> US</label><br>
            <label><input id="eu" type="radio" name="format" value="European"/> European</label>
        </fieldset>

        <fieldset id="fontSize">
            <legend>Font Size</legend>
            <label><input id="med" type="radio" name="fontSize" value="Medium"/> Medium</label><br>
            <label><input id="large" type="radio" name="fontSize" value="Large"/> Large</label><br>
            <label><input id="xLarge" type="radio" name="fontSize" value="X-Large"/> X-Large</label>
        </fieldset>

        <fieldset id="flag">
            <legend>Flag</legend>
            <label><input id="show" type="checkbox" name="flag" value="Show"/> Show</label>
        </fieldset><br><br>

        <label for="colors">Text Color</label><br>
        <select name="colors" id="textColor">
            <option></option>
            <option value="red">Red</option>
            <option value="pink">Pink</option>
            <option value="purple">Purple</option>
            <option value="orange">Orange</option>
        </select>

        <label for="backgroundColor">Background Color</label>
        <select id="backgroundColor">
            <option></option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="purple">Purple</option>
            <option value="orange">Orange</option>
        </select><br>
        <button id="submit">Submit</button>
        </div>
    </body>
</html>

标签： javascripthtmlcss

javascript - 无法理解如何使用 CSS 格式化 HTML 页面

问题描述

解决方案

推荐阅读