php - 按钮和选择选项在表单中重叠

Question

我正在尝试在水平方向制作一个表单，此时按钮和选择选项与表单的一部分重叠，请帮忙看看

这是相关的CSS

       form.ilistbar label {
    font-weight:bold;
    font-size: small;

}
form.ilistbar label.fixedwidth {
    display:block;
    width: 240px;

}
.action-box .listbar {
    padding: 12px 0 12px 10px;
    margin: 0 0 0 220px;
    border-left: 1px solid black;
    min-height: 200px;
    margin: 0;
}
.action-box .titlebar {
  width: 100%;
  padding: 12px 10px;
  margin: 0;
  float: none;
}
.action-box .listbar {
padding: 12px 0 12px 10px;
margin: 0 0 0 220px;
border-left: 1px solid black;
min-height: 200px;
margin: 0;
}
.action-box .titlebar {
  width: 100%;
  padding: 12px 10px;
  margin: 0;
  float: none;
}

 form div {
  display: inline-block;
  width: 100px;
  vertical-align: top;

}

form div label {
  display: inline-block;
}

这是与表单相关的html标记

 <div class="primary">
<div class="action-box rounded">
<div class="titlebar">
<h2>Order Form</h2>
</div>
<div class="listbar">
<?php
if( isset($_POST['submit']) ){
$submit = $_POST['submit'];

//form data
$Sname = mysql_real_escape_string(htmlentities(strip_tags($_POST['Sname'])));
$Pname = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pname'])));
$Pidno = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pidno'])));
$Psize = mysql_real_escape_string(htmlentities(strip_tags($_POST['Psize'])));
$Pcolour = mysql_real_escape_string(htmlentities(strip_tags($_POST['Pcolour'])));
$Pquantity = $_POST['Pquantity'];
$Weblink = mysql_real_escape_string(htmlentities(strip_tags($_POST['Weblink'])));
$Price = mysql_real_escape_string(htmlentities(strip_tags($_POST['Price'])));
$comment = mysql_real_escape_string(htmlentities(strip_tags($_POST['comment'])));
$date = date("Y-m-d");


//echo " ('','$Sname','$Pname','$Pidno','$Psize','$Pcolour','$Pquantity','$Weblink','$Price','$Uname')";
if('POST' === $_SERVER['REQUEST_METHOD']) 

{
if ($Sname&&$Pname&&$Pidno&&$Weblink&&$Price)
{
if (is_numeric($Price))
{
    $repeatheck = mysql_query("SELECT * FROM repplac WHERE Uname = '{$_SESSION['username']}' AND Pidno ='$Pidno' AND Sname='$Sname' AND Pname='$Pname'");
    $count = mysql_num_rows($repeatheck);
if($count!=0)
{
    die ('PRODUCT ALREADY IN BASKET YOU CAN INCREASE OR DECREASE QUANTITY, <a href="youraccount.php">CLICK TO GO BACK TO YOUR LIST</a>');
}
else
//echo'$Price';
$tprice = $Price * $Pquantity;
//echo"$tprice";
$queryreg = mysql_query("
INSERT INTO repplac VALUES ('','$Sname','$Pname','$Pidno','$Psize','$Pcolour','$Pquantity','$Weblink','$Price','$comment','$tprice','$date','{$_SESSION['username']}','')
")or die(mysql_error());
}
else
echo 'price field requires numbers';
}
else
echo 'please fill in all required * fields ';
}
}
?>
<form action='youraccount.php' method='Post' class='ilistbar'>
    <!--<div>
    <label for='shoppinglist' class='fixedwidth'></label>
    <textarea type='text' name='shoppinglist' id='username' cols='100' rows='15'></textarea>
    </div> -->
    <div>
    <label for='Sname' class='fixedwidth'> * Shop name</label>
    <input type='text' name='Sname' id='Sname'/>
    </div>
    <div>
    <label for='Pname' class='fixedwidth'> * Product name</label>
    <input type='text' name='Pname' id='Pname'/>
    </div>
    <div>
    <label for='Pidno' class='fixedwidth'> * Product id no</label>
    <input type='text' name='Pidno' id='Pidno'/>
    (This should be unique for each product)
    </div>
    <div>
    <label for='Psize' class='fixedwidth'>Product size</label>
    <input type='text' name='Psize' id='Psize'/>
    </div>
    <div>
    <label for='Pcolour' class='fixedwidth'>Product colour</label>
    <input type='text' name='Pcolour' id='Pcolour'/>
    </div>
    <div>
    <label for='Pquantity' class='fixedwidth'>Product quantity</label>
    <select name="Pquantity" id="Pquantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option> 
</select>
    </div>
    <div>
    <label for='Weblink' class='fixedwidth'> * Web link</label>
    <input type='text' name='Weblink' id='Weblink'/>
    </div>
    <div>
    <label for='Price' class='fixedwidth'> * Price GBP</label>
    <input type='text' name='Price' id='Price'/>
    Please valid format is (.) for decimal
    </div>
    <div>
    <label for='comment' class='fixedwidth'> Extra info</label>
    <input type='text' name='comment' id='comment'/>
    Please give different colours , sizes of the same products,discount codes, and other information that you would like us to use
    </div>
    <div>

    <div class='buttonarea'>
            <p>
            <input type='submit' name='submit' value='Add'>
            </p>
            </div>
            </p>
    </form>
</div>
</div>
</div>

Answer 1

看看这个 => http://jsfiddle.net/L9R3B/问题出在输入的宽度上，它们导致父 div 溢出，标签也是如此。