0

嗨,我正在尝试制作订单,一切正常,直到我为网站制作样式表结束。然后整个事情搞砸了,表单的图例一直到页面的右端,下拉框从左到右而不是从上到下显示所有选项。谁能看一下这个 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;

如果需要,我也可以在此处发布 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 &amp; 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 &amp; 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 &#183; 871 Park St. &#183; 
                     East Point, GA 30344
                     &#183; (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&deg;. 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&deg; for 
            8 hours (turn half-way through).
         </p>
      </aside>


   </body>

</html>
4

1 回答 1

0

你能分享一下标记(html)吗?您正在使用 % 作为图例等某些元素的宽度单位。我没有看到具有固定宽度集的父容器元素,因此图例将成为您页面的 100%。

于 2013-09-22T19:08:50.063 回答