php - 如何对齐函数生成的表单和文本？

Question

我正在开发一个具有多种形式的网页，其中一些文本接近于形式。这个表单和文本是由一个函数生成的，但是我得到了这个

如您所见，表格和文本与下面的表格和文本不对齐。我想要这个:

(这项工作是因为我手动放置了空格)。这就是我创建表单的方式。

function add_form($product,$name,$productp)
{
  $productpt = "X";

  echo $name;
  echo '<input type="text" name="'. $product. '" id="'. $product. '" style="font-size:12pt;height:30px"/> x'.$productp. '€
  price:'.$productpt.'€<br>';
}

echo '<form  method="post" name="form1" id="form1" autocomplete="off">'; //start form    
echo '<div class="leftpane">'; //start leftpane
echo '<h1>';

echo '<font size="6" color="red"> ALIMENTS </font><br>';

//ADD ELEMENTS IN MY MENU
//The first argument is the form name and id, the second is the name that will be printed(to the left of the form), the third argument is the price.
$menu[] = new Menu("pasta", "Pasta", 2);

$menu[] = new Menu("spaghetti", "Spaghetti", 1.50);

$menu[] = new Menu("pizza", "Pizza", 5);

$menu[] = new Menu("chicken_wings_x4", "Chicken Wings X4", 4.50);

$menu[] = new Menu("cheeseburger", "Cheeseburger", 6);

$menu[] = new Menu("Sandwich", "Sandwich", 2);

$menu[] = new Menu("hamburger", "Hamburger", 4.50);

$menu[] = new Menu("stuff", "stuff", 15.50);

//FOR EACH ELEMENT CREATE A FORM
for($i=0; $i<count($menu); $i++){
  add_form($menu[$i]->form_name, $menu[$i]->name, $menu[$i]->price);
}


echo '</h1>';
echo '</div>'; //Close leftpane
...Do Others stuff in middlepane and in rightpane

为了在 html 中更清楚，例如第一种形式将是:

<input type="text" name="pasta" id="pasta" style="font-size:12pt;height:30px"/> x2€ price:X€<br>

我想将左 Pane 分成 3 部分，将 $name 放在左边，表格放在中间，价格放在右边。但问题是我在函数中创建表单，所以我不知道该怎么做。
这是我的 CSS:

<style>
input[type=text] {
    width: 10%;
    margin: 7.5px 0;
    box-sizing: border-box;
}
input[type=submit].class1 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
input[type=submit].class2 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.middlepane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.rightpane {
  width: 33%;
  height: 100%;
  position: relative;
  float: right;
  border-collapse: collapse;
}
form {
    display: inline-block;
}
h1 {
    font-size: 19.5px;
}

</style>

Answer 1

我建议您使用表格。 https://www.w3schools.com/html/html_tables.asp

或者您可以将每个部分包装到一个 div 容器中并定义其宽度。