我是 HTML 的新手,我問過我的老師,但他只是告訴我去谷歌,所以......
我想創建一個這樣的邊框,周圍的邊框,大小,地殼等,但它沒有出現
我的看起來像這樣
我的代碼看起來像這樣
有誰知道怎么做?我認為這是 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>
uj5u.com熱心網友回復:
我在這里更新請檢查這里使用fieldset
uj5u.com熱心網友回復:
結帳這個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%;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/337338.html
