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

看看这个=＆gt; http://jsfiddle.net/L9R3B/ 问题在于输入的宽度，它们导致父div的溢出，与标签相同。

按钮并选择表格中重叠的选项

1 个答案: