HTMLフォームの入力フィールドの幅を調整する際に問題に直面していました。私はそれをグーグルし、スタックオーバーフローサイトでいくつかの解決策を見つけました。テーブルを作成し、そこに入力フィールドを配置しました。問題は解決しましたが、テーブル全体がページの下部に表示される理由がわかりません。プログラムの一部を公開しています。よろしければご確認いただき、ご指導ください。
include 'connect.php';
// $select_query= 'Select * from category';
// $select_query_run = mysql_query($select_query);
echo "<div id='line' >
<div id='form'>";
echo "
<form action='insert_product.php' method='POST' enctype='multipart/form-data' ></br></br>
<table border=1>
<tr>
<td>
<label>Product Name:</label> </td> <td><input type='text' name='product_name' />*Required</td></tr></br> </br>
<tr><td><label>Item No:</label></td> <td><input type='text' name='item_no' ></td></tr></br></br>
<tr><td>Recipient </td> <td> <input type='text' name='recipient' ></td></tr> </br></br>
<tr><td> Total Carat Weight</td> <td><input type='text' name= 'total_carat_weight' ></td></tr></br></br>
<tr><td> Metal </td><td><input type='text' name='metal' ></td></tr></br></br>
<tr><td> Stone Shape </td><td><input type='text' name='stone_shape' ></td></tr></br></br>
<tr><td> Stone Type</td><td> <input type='text' name='stone_type'></td></tr> </br></br>
<tr><td> Stone Setting</td><td> <input type='text' name='stone_setting'></td></tr> </br></br>
<tr><td> Wastage </td><td><input type='text' name='wastage'></td></tr></br></br>
<tr><td> Retail_price </td><td><input type='text' name='retail_price' ></td></tr></br></br>
<tr><td> Actual Price: </td><td> <input type= 'text' name= 'price' /></td></tr>*Required</br> </br>
<tr><td> Description:</td><td><input type='text' name='description' /></td></tr></br></br>
<tr><td> Image1:</td><td> <input type='file' name= 'image' ></td></tr> *Required</br></br>
<tr><td> Image2:</td><td> <input type='file' name= 'image2' ></td></tr></br></br>
<tr><td> Image3:</td><td> <input type='file' name= 'image3' ></td></tr></br></br></table> ";
/*------------------
Drop Down List Start
------------------ */
echo "<select name='category'>";
$select_query= 'Select * from category';
$select_query_run = mysql_query($select_query);
$sub_category_query= "Select * from sub_categories";
$sub_query_run= mysql_query($sub_category_query);
while ($select_query_array= mysql_fetch_array($select_query_run) )
{
echo "<option value='".$select_query_array['category_id']."' >".
htmlspecialchars($select_query_array["name"]).
"<option value='".$sub_query_run['sub_category_id']."' >" .
htmlspecialchars($sub_query_run['sub_category_name']). "</option>".
"</option>";
}
echo "</br>";
$selectTag= "</br><input type='submit' value='Insert Product' /></select></form>";
echo "</div></div>";
echo $selectTag;
これは私のCSSファイルです。
#line
{
height: 900px; /*Specify Height*/
width: 790px; /*Specify Width*/
border: 1px solid #d5dfea; /*Add 1px solid border, use any color you want*/
background-color: #fafbfd; /*Add a background color to the box*/
text-align:left; /*Align the text to the center*/
/*margin: auto;*/
margin:10px;
box-shadow: 10px 5px 5px #888888;
padding:20px;
}
#form
{
margin :auto;
padding:inherit;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
input, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}