html - 排列按钮 html

Question

我有一个页面显示有关“容器”中元素的一些信息，在该容器中有一些不同的字段以及 2 个访问不同页面的按钮。我在让按钮水平排列时遇到问题，我该如何完成？我在想这与表格的呈现方式有关，有没有比表格更好的方法？你能像

这样用 css 设计表单样式吗

display: inline

这是我第一次弄乱 HTML，这是我的代码，谢谢:

<div class="project-container">
    <label class="boldLabel">Project ID:</label>
    <span><?php echo $pId; ?></span><br>
    <label class="boldLabel">Project Owner:</label>
    <span><?php echo $pName; ?></span><br>
    <label class="boldLabel">Project Description:</label>
    <span><?php echo $pDesc; ?> </span><br><br>
    <label class="boldLabel">Project Due Date:</label>
    <span><?php echo $dDate; ?> </span><br>
        <form action="delete.php" method="GET">
            <input type="hidden" name="pId" value="<?php echo $pId; ?>">
            <button class="buttonDelete" type="submit" name="delete">Delete Project</button>
        </form>
        <form action="update.php" method="GET">
            <input type="hidden" name="pId" value="<?php echo $pId; ?>">
            <input type="hidden" name="pName" value="<?php echo $pName; ?>">
            <input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
            <input type="hidden" name="dDate" value="<?php echo $dDate; ?>">
            <button class="buttonUpdate" type="submit" name="update">Update Project</button>
        </form>
    </div>
</div>

Answer 1

您的文件中不需要任何 2 个表格。您只需要 1 个处理这两个过程(删除和更新)的通用表单标签。这些过程可以通过 Javascript 函数和事件进行管理。

注意: 2 个按钮没有水平对齐的问题是因为您在不同的表单标签上有某些元素。您可以使用 css 做一些额外的工作，但是开发人员通常会避免在一个文件中包含 2 个表单，除非这可能是特定过程的唯一方法。

我修改了代码。您可以在此处查看代码片段:

function buttoncheck(action)
  {
  //$("project-container").load("process.php", {action: action});   
  // This is an example of how you could "call" process.php
  }

<form action="process.php" method="post">

<div id="project-container" class="project-container">
    <label class="boldLabel">Project ID:</label>
    <span><?php echo $pId; ?></span><br>
    <label class="boldLabel">Project Owner:</label>
    <span><?php echo $pName; ?></span><br>
    <label class="boldLabel">Project Description:</label>
    <span><?php echo $pDesc; ?> </span><br><br>
    <label class="boldLabel">Project Due Date:</label>
    <span><?php echo $dDate; ?> </span><br>
            <input type="hidden" name="pId" value="<?php echo $pId; ?>">
            <input type="hidden" name="pId" value="<?php echo $pId; ?>">
            <input type="hidden" name="pName" value="<?php echo $pName; ?>">
            <input type="hidden" name="pDesc" value="<?php echo $pDesc; ?>">
            <input type="hidden" name="dDate" value="<?php echo $dDate; ?>">

        <button class="buttonDelete" type="button" name="delete" onClick="buttoncheck(0)">Delete Project</button>
        <button class="buttonUpdate" type="button" name="update" onClick="buttoncheck(1)">Update Project</button>
        
             
    </div>
    </form>

在“process.php”文件中

<?php

$action=$_POST['action'];

// To Update

if($action=1){

// update code here

}

if($action=0){

// delete code here

}

你可以在这个链接查看如何刷新div内容，onclick函数，css管理:

Load jquery method

Load Jquery method 2

onclick function

button css design process