面向下方，将我的输入和按钮对齐在屏幕的底部中央答案

【问题标题】：Facing below aligning my input and buttons at the bottom center of the screen面向下方，将我的输入和按钮对齐在屏幕的底部中央
【发布时间】：2023-01-12 23:02:13
【问题描述】：

我曾尝试使用 justify content 但内容不断地堆叠在另一个之上以下是我的代码以及我尝试的原因

以上是我希望布局的外观我尝试为每个输入实现类，但无法让它们相互叠加，我们将不胜感激。

<?php
    if (isset($_POST["submit_address"]))
    {
        $address = $_POST["address"];
        $address = str_replace(" ", "+", $address);
        ?>
 
        <iframe padding ="5px" width="100%" margin="5px"  height="600px" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>
 
        <?php
    }

  if (isset($_POST["submit_coordinates"]))
    {
        $latitude = $_POST["latitude"];
        $longitude = $_POST["longitude"];
        ?>
 
        <iframe padding ="5px" width="100%" margin="5px"  height="600px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
 
        <?php
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livestock Dashboard</title>
    <style>
        button{
            width: 7%;
    height: 45px;
    background: #2364d2;
    border: none;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
    color: #fff;
    margin-top: 20px;
    cursor: pointer;


   
        }

        input{
            text-align: center;
            width: 50%;
    height: 40px;
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #ced6e0;
    transition: all 0.3s ease-in-out;
    font-size: 18px;
    padding: 5px 15px;
    background: none;
    color: #1a3b5d;
    font-family: "Source Sans Pro", sans-serif;




        }

        body {
  background-image: url('bull.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

        </style>
</head>
<body>
<form method="POST">
    <p>
        <input type="text" name="address" placeholder="Enter address">
    </p>
 
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_address" style ="
    ">
    Submit
</button>
</div>
</form>
<form method="POST">
    <p>
        <input type="text" name="latitude" placeholder="Enter latitude">
    </p>
 
    <p>
        <input type="text" name="longitude" placeholder="Enter longitude">
    </p>
 
  <div style="justify-content:left; align-items:center; display:flex;">
  <button type="submit" name="submit_coordinates">
    Submit
    </button>
  </div>
</form>
    
</body>
</html>

我尝试在 div 上使用 justify content 但 id 没有用

【问题讨论】：

你能做一个最小的复制吗：stackoverflow.com/help/minimal-reproducible-example

标签： html css

【解决方案1】：

英语很难理解，但希望这对您有所帮助。

在你的<form> 中的样式中添加以下内容：

style="display: flex;  justify-content: stretch;"

更改 justify-content 和 center 以适应。您可以在here 找到您可以使用的一个易于理解的可能选项列表，或者您可以使用来自 Mozilla 的更好的记录list。

这将使您的输入和提交按钮彼此相邻而不是堆叠。

CodePen 上的模拟可以在here 找到。

此外，从您的按钮样式中删除 width: 7%;。

【讨论】：