HTML 边框未显示在我的表单中答案

【问题标题】：HTML The Border not showing up in my formHTML 边框未显示在我的表单中
【发布时间】：2021-10-26 21:27:12
【问题描述】：

我是 HTML 新手，我问过我的老师，但他只是告诉我要谷歌所以...

I want to create a border like this, the ones surrounding, size,crust etc but it doesn't show up

有人知道怎么做吗？我认为这是 CSS 或其他什么的问题，但后来我的老师说它没有使用 css 来制作那个边框，所以我现在很困惑。

我的代码是这样的：

form {
    font-family: Arial, Helvetica, sans-serif;
    padding: 30px;
    border: 10px solid olive;
}

label {
    display: inline-block;
    width: 100px;
    margin-left: 20px;
}

<form>
    <h1>Pizza Order Form</h1>
    <label>Pizza Type:</label>
    <select name="type" id="type">
        <option>Aloha Chicken</option>
        <option>Beef Pepperoni</option>
        <option>Chicken Delight</option>
        <option>Deluxe Cheese</option>
    </select>

    <label>Quantity:</label>
    <input type="number" min="1" max="4" value="1" /> <br /><br />

    <div>
        <label>Size:</label>
        <input type="radio" id="small" />
        <label for="small">Small</label>
        <input type="radio" id="medium" />
        <label for="medium">Medium</label>
        <input type="radio" id="large" />
        <label for="large">Large</label>
    </div>
    <br />

    <div>
        <label>Crust:</label>
        <input type="radio" id="thin" />
        <label for="thin">Thin</label>
        <input type="radio" id="thick" />
        <label for="thick">Thick</label>
        <input type="radio" id="deep dish" />
        <label for="deep dish">Deep Dish</label>
    </div>

    <br />
    <div>
        <label>Toppings:</label>
        <input type="checkbox" id="Mushroom" />
        <label for="Mushroom">Mushroom</label>
        <input type="checkbox" id="Sausage" />
        <label for="Sausage">Sausage</label>
        <input type="checkbox" id="Olives" />
        <label for="Olives">Olives</label>
    </div>

    <br />
    <label>Addons:</label>
    <select>
        <option>Please select addons if required</option>
        <option>Side of Buffalo Wings</option>
        <option>Garlic Bread</option>
    </select>

</form>

【问题讨论】：

去看看 fieldset 元素（及其伴侣，legend） - 它的目的是对表单字段进行分组，默认情况下会呈现您想要的边框。

标签： html css

【解决方案1】：

我在这里更新请检查here使用fieldset

【讨论】：

【解决方案2】：

结帐this codepen。这可能对你有帮助:)

对于 HTML：

<div class="container">
  <div class="content">
    form details
  </div>
</div>

对于 CSS：

* {
 box-sizing: border-box;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black; 
  margin: 20px;
  padding: 4px;

}
.container .content {
  border: 10px solid olive; 
  height: 100%;
}

【讨论】：