Question

我的 HTML 代码：

body{
  font-family: cursive;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(95, 112, 160, 0.479);
}

h2{
  display: block;
  border: 2px solid black;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#details{
  display: block;
  background-color:rgba(28, 117, 190, 0.726);
}

#back{
  font-size:20px;
  margin-left: 100px;
  border-radius: 8px;
}

#go{ 
  font-size:20px;
  margin-left: 800px;
  border-radius: 8px;  
}

<body>
    <h2>Please finalize your details</h2>
    <form id="details" action=database_registration.php method="post" class="form">

        Full name: <strong name="name_1" value=""></strong><br><br>
        ID No:<strong name="org_number_1" value=""></strong><br><br>
        Mobile No:<strong name="ph_number_1" value=""></strong><br><br>

        E-mail: <strong name="email_1"></strong><br><br>
        ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>

        <button id="go" style="background-color: whitesmoke">It's correct</button>

    </form>
    <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
    <p id="response"></p>
</body>

如您所见，按钮 It's correct 位于蓝色显示块内。我想把它重新定位在下面一点。请帮我解决这个问题。

我希望两个按钮都在蓝色显示屏之外并处于相同的高度。

Answer 1

要将其放在蓝色框下方，您只需添加 margin-bottom: (value); 并调整一些内容（请参阅下面的详细信息）

请看下面的例子：

body{
    font-family: cursive;
    font-size: 25px;
    font-weight: bold;
    background-color: rgba(95, 112, 160, 0.479);
}

h2{
    display: block;
    border: 2px solid black;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#details{
    display: block;
    background-color:rgba(28, 117, 190, 0.726);
}

#back{
    font-size:20px;
    margin-left: 100px;
    border-radius: 8px;
}

#go{ 
    font-size:20px;
    margin-left: 300px;
    border-radius: 8px;  
    margin-bottom: 800px;
}

<body>
    <h2>Please finalize your details</h2>
    <form id="details" action=database_registration.php method="post" class="form">

        Full name: <strong name="name_1" value=""></strong><br><br>
        ID No:<strong name="org_number_1" value=""></strong><br><br>
        Mobile No:<strong name="ph_number_1" value=""></strong><br><br>
        
        E-mail: <strong name="email_1"></strong><br><br>
        ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>

    </form>
    <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
    
    <button id="go" style="background-color: whitesmoke">It's correct</button>
    <p id="response"></p>
</body>

因此，我更改了一些内容，您的 go 按钮 HTML 需要与 back 按钮位于同一位置，并且我在您的 HTML 代码中切换了整行的位置。其次，我调整了 margin-left，因为您的按钮已经关闭。此外，我添加了 margin-bottom 以再次调整按钮的位置。根据您的要求，您希望它位于此代码完成该任务的表单下方，但如果缺少其他内容，请告诉我。

Answer 2

如果按钮用于提交表单，则需要在表单内部。

你也有一个明显的缺乏表单元素，我已经解决了。

将除按钮之外的所有内容封装在 filedset 中。然后创建一个特定的 div 来固定按钮并使用 flex 和 justify-content 来定位按钮。

body {
  font-family: cursive;
  font-size: 25px;
  font-weight: bold;
  background-color: rgba(95, 112, 160, 0.479);
}

h2 {
  display: block;
  border: 2px solid black;
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#details label {
  display: block;
  margin-bottom: 1.5em;
}

#details fieldset {
  background-color: rgba(28, 117, 190, 0.726);
  border: none;
}

#details input {
  font-size: 25px;
  font-weight: bold;
  border: none;
  background: none;
  font-family: cursive;
}

.buttons {
  display: flex;
  margin: 0.5em;
  justify-content: space-between;
}

.buttons button {
  font-size: 20px;
  border-radius: 8px;
}

<body>
  <h2>Please finalize your details</h2>
  <form id="details" action=database_registration.php method="post" class="form">
    <fieldset>
      <label>Full name: <input name="name_1" value=""></label>
      <label>ID No:<input name="org_number_1" value=""></label>
      <label>Mobile No:<input name="ph_number_1" value=""></label>
      <label>E-mail: <input name="email_1"></label>
      <div>ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""></div>
    </fieldset>
    <div class="buttons">
      <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button> <button id="go" style="background-color: whitesmoke">It's correct</button>
    </div>
  </form>

  <p id="response"></p>
</body>

如何更改表单中提交按钮的位置？

2 个答案: