您好，我正在尝试制作订单，一切正常，直到我为网站制作样式表快结束时。然后整个事情就搞砸了，表格的图例一直到页面的右端，下拉框从左到右而不是从上到下显示所有选项。谁能看一下这个 CSS 表并告诉我哪里搞砸了？
感谢网站新手。
/*fieldset styles */
fieldset {
border-width: 0px;
}
fieldset.optiongroup {
margin-left: 25%;
}
fieldset.optiongroup label {
float: none;
display: inline;
width: 100px;
}
/* legend styles */
legend {
background-color: rgb(239, 198, 145);
color: black;
margin-top: 10px;
margin-bottom: 10px;
text-indent: 20px;
width: 100%;
border-radius: 10px;
}
/* label styles */
label {
clear: left;
display: block;
float: left;
font-size: 0.8em;
text-align: right;
margin: 2px 5px;
width: 25%;
}
/* select styles */
select {
display: block;
float: left;
font-size: 0.9em;
margin: 2px;
}
/* text area styles */
textarea {
display: block;
float: left;
font-size: 0.9em;
height: 75px;
width: 60%;
}
/* option styles */
option {
float: none;
display: inline;
margin: 0px;
width: 20px;
}
/* input styles */
input {
display: block;
float: left;
font-size: 0.9em;
width: 60%;
margin: 2px 0px;
}
input[type="csc"] {
width: 50px;
}
input[type="submit"] {
background-color: rgb(239, 198, 145);
float: none;
width: 150px;
height: 30px;
margin: 10px auto;
border-radius: 15px;
}
/* input focus styles */
input:focus, select:focus, textarea:focus {
background-color: rgb(255, 218, 165);
}
input:focus:valid {
background: rgb(215, 255, 215) url(go.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
input:focus:invalid {
background: rgb(255, 245, 215) url(stop.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
如果需要 b 我也可以在这里发布 HTML 站点。在此先感谢您的帮助!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 2
The Spice Bowl
Author: Daniel Erb
Date: 21SEP13
Filename: spice.htm
Supporting files: diners.png, discover.png, formsubmit.js,
go.png, master.png, modernizr-1.5.js, payment.css,
regex.txt, sb.css, sbback.png, sblogo.png,
state.txt, stop.png, visa.png
-->
<meta charset="UTF-8" />
<title>Spice Bowl Financial Information</title>
<script src="modernizr-1.5.js"></script>
<script src="formsubmit.js"></script>
<link href="sb.css" rel="stylesheet" type="text/css" />
<link href="payment.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="sblogo.png" alt="The Spice Bowl" />
</header>
<nav>
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li><a href="#">Keyword Search</a></li>
<li class="newgroup"><a href="#">Spices</a></li>
<li><a href="#">Seasonings</a></li>
<li><a href="#">Blends</a></li>
<li><a href="#">Salts & Peppers</a></li>
<li><a href="#">Popcorn Seasonings</a></li>
<li><a href="#">Dip Mixes</a></li>
<li><a href="#">Bulk Spices</a></li>
<li><a href="#">Extracts</a></li>
<li><a href="#">Flavorings</a></li>
<li class="newgroup"><a href="#">Spice Jars</a></li>
<li><a href="#">Spice Jar Labels</a></li>
<li><a href="#">Spice Sets</a></li>
<li><a href="#">Mortar & Pestles</a></li>
<li class="newgroup"><a href="#">Cookbooks</a></li>
<li><a href="#">Online Recipes</a></li>
<li><a href="#">Forums</a></li>
<li class="newgroup"><a href="#">My Account</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Shipping Info</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<h1>Payment Form</h1>
<form id="Payment Form" name="Payment Form"
action="http://www.thespicebowlcorp.com/cgi-bin/payment"
method="post">
<fieldset id="Billing">
<legend>Billing Information (required)</legend>
<label for="fName">First Name</label>
<input name="fName" id="fName" required="required" />
<label for="lName">Last Name</label>
<input name="lName" id="lName" required="required" />
<label for="street">Street Address</label>
<input name="street" id="street" required="required" />
<label for="street2">Street Address (2)</label>
<input name="street2" id="street2" />
<label for="city">City</label>
<input name="city" id="city" required="required" />
<label for="State">State</label>
<select name="State" id="State" required="required">
<option value="state1">AL</option>
<option value="state2">AK</option>
<option value="state3">AZ</option>
<option value="state4">AR</option>
<option value="state5">CA</option>
<option value="state6">CO</option>
<option value="state7">CT</option>
<option value="state8">DE</option>
<option value="state9">FL</option>
<option value="state10">GA</option>
<option value="state11">HI</option>
<option value="state12">ID</option>
<option value="state13">IL</option>
<option value="state14">IN</option>
<option value="state15">IA</option>
<option value="state16">KS</option>
<option value="state17">KY</option>
<option value="state18">LA</option>
<option value="state19">ME</option>
<option value="state20">MD</option>
<option value="state21">MA</option>
<option value="state22">MI</option>
<option value="state23">MN</option>
<option value="state24">MS</option>
<option value="state25">MO</option>
<option value="state26">MT</option>
<option value="state27">NE</option>
<option value="state28">NV</option>
<option value="state29">NH</option>
<option value="state30">NJ</option>
<option value="state31">NM</option>
<option value="state32">NY</option>
<option value="state33">NC</option>
<option value="state34">ND</option>
<option value="state35">OH</option>
<option value="state36">OK</option>
<option value="state37">OR</option>
<option value="state38">PA</option>
<option value="state39">RI</option>
<option value="state40">SC</option>
<option value="state41">SD</option>
<option value="state42">TN</option>
<option value="state43">TX</option>
<option value="state44">UT</option>
<option value="state45">VT</option>
<option value="state46">VA</option>
<option value="state47">WA</option>
<option value="state48">WV</option>
<option value="state49">WI</option>
<option value="state50">WY</option>
</select>
<label for="zip">Zip/Postal Code</label>
<input name="zip" id="zip"
placeholder="nnnnn (-nnnn)"
required="required"
pattern="^\d{5}(\-\d{4})?$" />
<label for="country">Country</label>
<input name="country" id="country" required="required" value="United States" />
<label for="phone">Phone</label>
<input name="phone" id="phone" type="tel"
placeholder="(nnn) nnn-nnnn"
required="required"
pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" />
</fieldset>
<fieldset id="Credit Card">
<legend>Credit Card (required)</legend>
<fieldset id="optionGroup">
<label for="Diners"><img src="diners.png" alt="Diner" /></label>
<input type="radio" name="ccard" id="Diner"
value="Diner" />
<label for="Discover"><img src="discover.png" alt="Discover" /></label>
<input type="radio" name="ccard" id="Discover"
value="Discover" />
<label for="Master"><img src="master.png" alt="Master" /></label>
<input type="radio" name="ccard" id="Master"
value="Master" />
<label for="Visa"><img src="visa.png" alt="Visa" /></label>
<input type="radio" name="ccard" id="Visa"
value="Visa" />
</fieldset>
<label for="Credit Card Number">Credit Card Number</label>
<input name="Credit Card Number" id="Credit Card Number"
required="required"
pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" />
<label for="Expiration">Expiration Date</label>
<select name="ccardmonth" id="ccardmonth" required="required">
<option value="month0">--Month--</option>
<option value="month1">January (01)</option>
<option value="month2">February (02)</option>
<option value="month3">March (03)</option>
<option value="month4">April (04)</option>
<option value="month5">May (05)</option>
<option value="month6">June (06)</option>
<option value="month7">July (07)</option>
<option value="month8">August (08)</option>
<option value="month9">September (09)</option>
<option value="month10">October (10)</option>
<option value="month11">November (11)</option>
<option value="month12">December (12)</option>
</select>
<select name="ccardyear" id="ccardyear" required="required">
<option value="year0">--Year--</option>
<option value="year1">2014</option>
<option value="year2">2015</option>
<option value="year3">2016</option>
<option value="year4">2017</option>
<option value="year5">2018</option>
</select>
<label for="CSC">CSC</label>
<input name="CSC" id="CSC"
placeholder="nnn"
required="required"
pattern="^\d{3}$" />
</fieldset>
<fieldset id="Additional Information">
<legend>Additional Information</legend>
<label for="email">Contact Email</label>
<input name="email" id="email" type="email" />
<label for="notes">Special Notes</label>
<textarea name="notes" id="notes"></textarea>
</fieldset>
<p>
<input type="submit" value="Submit Order" />
</p>
</form>
<footer>
<address>The Spice Bowl · 871 Park St. ·
East Point, GA 30344
· (404) 555- 8711
</address>
</footer>
</section>
<aside>
<h1>The Spice Bowl Recommends</h1>
<h2>Salt-Roasted Pecans</h2>
<ul>
<li>2 cups pecans</li>
<li>3 Tbs. butter, melted</li>
<li>1 1/4 tsp. fine sea salt</li>
</ul>
<p>Preheat oven to 325°. Toss pecans and butter together;
add salt and toss again. Spread in a single layer on a baking
sheet. Bake about 15 minutes. Cook on baking sheet.
</p>
<h2>Dried Beef Sticks</h2>
<ul>
<li>5 lbs. ground chuck</li>
<li>5 Tbs. quick salt</li>
<li>3 tsp. mustard seed</li>
<li>2 tsp. granulated garlic</li>
<li>2 tsp. cracked pepper</li>
<li>1 Tbs. hickory smoked salt</li>
<li>1 Tbs. liquid smoke</li>
</ul>
<p>Mix beef and season. Place in a large covered container
for three days; make sure beef is thoroughly mixed each day.
On third day, shape beef into sticks, and bake at 150° for
8 hours (turn half-way through).
</p>
</aside>
</body>
</html>
最佳答案
你能分享标记(html)吗？您在某些元素(例如图例)上使用 % 作为宽度单位。我没有看到设置了固定宽度的父容器元素，因此图例将占页面的 100%。
关于CSS 在表单中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18947625/