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>

我想将左窗格分成三部分，将$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容器中并定义其宽度。

Answer 2

我认为您的输出代码将真正受益于其他一些带有类的HTML结构，这些类允许您与CSS一致地控制其布局。我将更新add_form()函数：

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

  echo '<div class="form-wrap">';
  echo '<span class="form-name">' . $name . '</span>';
  echo '<input type="text" name="'. $product. '" id="'. $product. '"/> <span class="form-label">x'.$productp. '€</span> <span class="form-price">price:'.$productpt.'€</span>';
  echo '</div>';
}

然后使用具有更可定位的HTML结构的输出，您可以使用CSS做到这一点：

.form-wrap input {
  font-size: 12pt;
  height: 30px
}
.form-name {
  display: inline-block;
  width: 100px;
  margin-right: 20px;
}
.form-label {
  display: inline-block;
  margin-left: 5px;
  margin-right: 20px;
}

<div class="form-wrap">
  <span class="form-name">Something</span>
  <input type="text" name="something" id="somethingId" />
  <span class="form-label">x1€</span>
  <span class="form-price">price:1€</span>
</div>
<div class="form-wrap">
  <span class="form-name">Another one</span>
  <input type="text" name="anotherone" id="somethingId2" />
  <span class="form-label">x2€</span>
  <span class="form-price">price:2€</span>
</div>
<div class="form-wrap">
  <span class="form-name">Number Three</span>
  <input type="text" name="thirdone" id="somethingId3" />
  <span class="form-label">x3€</span>
  <span class="form-price">price:3€</span>
</div>

Answer 3

尝试一下。

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

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

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

3 个答案: