无法定位div块

时间：2016-04-12 08:45:35

标签： html css

我遇到问题，将div block第4步显示在第2步下面。

在Chrome中的开发者模式下，我可以看到步骤3有一个非常大的边距/填充区域。

任何人都知道我做错了什么让第3步这么大？

代码如下：

谢谢，

麦

＆＃13;
＆＃13; 
    #master {
      width: 100%;
      height: 500px;
    }
    #header {
      margin: auto;
      text-align: center;
      color: red;
      background-color: gray;
      border-style: solid;
    }
    #sidemenu {
      float: left;
      width: 10%;
      height: 100%;
      margin: auto;
      text-align: center;
      padding-top: 20%;
      border-style: solid;
    }
    #secondheading {
      margin-top: 10px;
      margin-right: 10%;
      text-align: center;
      font-size: 25px;
      border-style: dotted;
    }
    #step1 {
      float: left;
      margin-left: 15%;
      margin-top: 50px;
      border-style: dotted;
    }
    #step2 {
      float: left;
      margin-left: 15%;
      margin-top: 50px;
      margin-bottom: 50px;
      border-style: dotted;
    }
    #step3 {
      margin-top: 200px;
      margin-left: 25%;
      padding-right: 0;
      padding-left: 0;
      width: 200px;
      border-style: dotted;
    }
    #step4 {
      margin-top: 10px;
      float: left;
      border-style: dotted;
    }
    #step5 {
      margin-top: 10px;
      float: left;
      margin-left: 15%;
      border-style: dotted;
    }
＆＃13; 
<div id="master">

  <div id="header">
    <h1> ICC Pizza Shop </h1>
  </div>

  <div id="sidemenu">Order
    <br>
    <br>Menu
    <br>
    <br>Specials
    <br>
    <br>Locations
    <br>
    <br>Help
    <br>
    <br>
  </div>

  <div id="secondheading">Pizza Order Form</div>




  <div id="step1">
    Step 1: Fill contact info
    <br>Name:
    <input type="text" name="Name">
    <br>Phone:
    <input type="number" name="number">
    <br>Email:
    <input type="email" name="email">
    <br>
  </div>


  <div id="step2">
    Step 2: Choose type of crust
    <br>
    <Select size="3">
      <option>Deep Pan</option>
      <option>Original</option>
      <option>Thin</option>
    </select>
  </div>


  <div id="step3">
    <p>Step 3: Choose toppings
      <br>Type of Toppings:
      <br>
    </p>

    <input type="checkbox" name="topping_type_1">Pepporoni
    <br>
    <input type="checkbox" name="topping_type_2">Green Pepper
    <br>
    <input type="checkbox" name="topping_type_3">Pineapple
    <br>
    <input type="checkbox" name="topping_type_4">Mushroom
    <br>
    <input type="checkbox" name="topping_type_5">Salami
    <br>
    <input type="checkbox" name="topping_type_6">Anchovives
    <br>
    <input type="checkbox" name="topping_type_7">Sausage
    <br>

  </div>


  <div id="step4">
    Step 4: Choose Special Offer(s)
    <br>
    <table>
      <tr>
        <th align="right">Special Offer</th>
        <th align="Left">Price</th>
        <th align="Left">QTy</th>
      </tr>

      <tr>
        <td>Peperoni Lover and 2 Ltr Coke</td>
        <td>12.99</td>
        <td>
          <input type="text" name="offer_qty_1" size=1 maxlength=3>
        </td>
      </tr>

      <tr>
        <td>Mexicana Jaleaperio 2 Ltr Coke and 1 garlic bread</td>
        <td>15.99</td>
        <td>
          <input type="text" name="offer_qty_2" size=1 maxlength=3>
        </td>
      </tr>

      <tr>
        <td>3 Family any Style Pizza, 3 garlic bread</td>
        <td>25.99</td>
        <td>
          <input type="text" name="offer_qty_3" size=1 maxlength=3>
        </td>
      </tr>
    </table>
  </div>


  <div id="step5">
    Step 5: Any special instructions you would like to add:
    <br>
    <textarea rows="6" cols="70"></textarea>
  </div>


</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
#master
{
 width: 100%;
 height: 500px;
}

#header
{
  margin: auto;
  text-align: center;
  color: red;
  background-color: gray;
  border-style: solid;
}

#sidemenu
{
 float: left;
 width: 10%;
 height: 100%;
 margin: auto;
 text-align: center;
 padding-top:20%;
 border-style: solid;
}

#secondheading
{
  margin-top: 10px;
  margin-right: 10%;
  text-align: center;
  font-size: 25px;
  border-style: dotted;
}

#step1
{
  float: left;
  margin-left: 15%;
  margin-top: 50px;
  border-style: dotted;
}


#step2
{
  float: left;
  margin-left: 15%;
  margin-top: 50px;
  margin-bottom: 50px;
  border-style: dotted;
}

#step3
{
  display:inline-block;
 /*margin-top: 200px;*/
  margin-left:25%;
 padding-right: 0;
 padding-left: 0;
 width: 200px;
 border-style: dotted;
}

#step4
{
 margin-top: 10px;
 float: right; /*float: left;*/
 border-style: dotted;
 margin-right:10%;
}

#step5
{
 margin-top: 10px;
 float: left;
 margin-left: 15%;
 border-style: dotted;
}
＆＃13; 
<div id ="master">

<div  id = "header">
<h1> ICC Pizza Shop </h1>
</div>

<div id = "sidemenu">Order <br><br> Menu <br><br> Specials <br><br> Locations <br><br>Help <br><br> </div>

<div id = "secondheading"> Pizza Order Form </div>




<div id = "step1">
Step 1: Fill contact info <br>
Name: <input type = "text" name = "Name"><br>
Phone: <input type = "number" name = "number"><br>
Email: <input type = "email" name = "email"><br>
</div>


<div id = "step2">
Step 2: Choose type of crust<br>
<Select size = "3">
  <option> Deep Pan</option>
  <option> Original </option>
  <option> Thin </option>
</select>
</div>



<div id = "step3">
<p>Step 3: Choose toppings<br>
Type of Toppings:<br></p>

<input type="checkbox" name="topping_type_1"> Pepporoni<br>
<input type="checkbox" name="topping_type_2"> Green Pepper<br>
<input type="checkbox" name="topping_type_3"> Pineapple<br>
<input type="checkbox" name="topping_type_4"> Mushroom<br>
<input type="checkbox" name="topping_type_5"> Salami<br>
<input type="checkbox" name="topping_type_6"> Anchovives<br>
<input type="checkbox" name="topping_type_7"> Sausage<br>

</div>


<div id = "step4">
Step 4: Choose Special Offer(s)<br>
<table>
<tr>
  <th align = "right">Special Offer</th>
  <th align = "Left">Price</th>
  <th align = "Left">QTy</th>
</tr>

<tr>
  <td> Peperoni Lover and 2 Ltr Coke </td>
   <td> 12.99</td>
   <td><input type="text" name="offer_qty_1" size=1 maxlength=3></td>
</tr>

<tr>
  <td> Mexicana Jaleaperio 2 Ltr Coke and 1 garlic bread</td>
  <td> 15.99</td>
   <td><input type="text" name="offer_qty_2" size=1 maxlength=3></td>
</tr>

<tr>
  <td> 3 Family any Style Pizza, 3 garlic bread</td>
  <td> 25.99</td>
   <td><input type="text" name="offer_qty_3" size=1 maxlength=3></td>
</tr>
</table>
</div>


<div id = "step5">
Step 5: Any special instructions you would like to add: <br>
<textarea rows="6" cols="70"></textarea>
</div>


</div>
＆＃13;
＆＃13;
＆＃13;

#step3是display: block，如果你给他display: inline-block它会变得如此之大，它将不再是100％宽度

相关问题
最新问题