Question

我在PHP页面中放置了以下脚本：

echo "The file has been successfully read!";
echo "<br>";
echo "<br>";
echo "<form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='displaypurchase' value='Purchases'>";
echo "</form>";
echo "<br>";

echo "<form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='displaygamebucks' value='Gamebucks'>";
echo "</form>";
echo "<br>";

echo "<form action='main.php' method='post' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='returntomain' value='Back to main'>";
echo "</form>";
echo "<br>";

页面看起来像这样：

http://s16.postimg.org/6afeiln85/Capture.png

如您所见，表单按钮彼此相距很远。我希望它们垂直对齐，彼此靠近。我如何实现他的目标？我试过飘，但结果很乱。

编辑：

这是我到目前为止所拥有的。我在FORM标签中添加了CSS样式，如Kel建议的那样。

现在我得到了这个：

http://s30.postimg.org/4fa5mxpxd/Capture2.png

它几乎就在那里，因为你可以看到它已经彼此关闭，剩下的唯一问题是我希望它们垂直定位，意味着从上到下。图片显示它们从上到下定位，但每个按钮都向右移动。我需要这些标签，因为没有它，按钮会水平排列。

最终编辑：让它以我想要的方式工作。我不知道为什么我以前没有想到它，但是我使用了一张没有边框的桌子，它的工作方式和我想要的一样。发布帮助他人的答案

Answer 1

我不知道为什么你会使用那么多的回声。尝试这个代码跳，你的问题将得到修复，代码将更加清晰。

<?php
$password=htmlspecialchars($_POST['Password']);    // it's your decision how you will get data from user 

$forms= <<<DATA
<style>
    form{
        float:left;
        display: inline-block;
    }
</style>

<form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>
    <input type='hidden' name='Password' value="{$password}" />
    <input type='submit' name='displaypurchase' value='Purchases'>
</form>


<form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>
    <input type='hidden' name='Password' value="{$password}">
    <input type='submit' name='displaygamebucks' value='Gamebucks'>
</form>


<form action='main.php' method='post' enctype='multipart/form-data'>
    <input type='hidden' name='Password' value="{$password}">
    <input type='submit' name='returntomain' value='Back to main'>
</form>
DATA;

echo $forms;
?>

Answer 2

在div中使用float

 .rows
 {
  float:left;
 }

   <div>The file has been successfully read!</div>
  <div class="rows">
  <form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>
 <input type='hidden' name='Password' value=''>
 <input type='submit' name='displaypurchase' value='Purchases'>
</form>
 </div>

   <div class="rows">

 <form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>
 <input type='hidden' name='Password' value=''>
 <input type='submit' name='displaygamebucks' value='Gamebucks'>
</form>
 </div>
<div class="rows">
<form action='main.php' method='post' enctype='multipart/form-data'>
<input type='hidden' name='Password' value=''>
<input type='submit' name='returntomain' value='Back to main'>
</form>
</div>

Demo

Answer 3

你的意思是水平而不是垂直吗？如果是，请删除<br>并将表单的一些CSS添加到display: inline-block;

看看这里：http://jsfiddle.net/CVfNx/

Answer 4

我不知道为什么我之前没有想到它，但是我使用了一张没有边框的桌子，它的工作方式和我想要的一样。发布帮助他人的答案

如何更接近表单提交按钮

4 个答案: