Question

我是CSS的新手，我正在编写一个带有提交按钮的表单的网页，但我无法很好地对齐表单中的提交按钮

我不知道如何解决这个问题，所以非常感谢任何帮助。

h1 {
  text-align: center;
  color: blue;
}
body {
  background-color: #1AD5EA;
  text-align: center;
}
form {
  display: inline-block;
  text-align: center;
}
td {
  /* text-align: center; */
  font-weight: bold;
}
input[type=submit] {
  padding: 5px 55px;
  border: 5 none;
  border-radius: 15px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <title>Nuevo cliente</title>
</head>

<body>
  <h1>Introduzca los datos del nuevo cliente</h1>
  <br/>


  <form action="procesar_form.php" method="post">

    <table>

      <tr>
        <td>Nombre</td>
        <td>
          <input type="text" name="nombre">
        </td>
      </tr>

      <tr>
        <td>Direcci&oacuten</td>
        <td>
          <input type="text" name="direccion">
        </td>
      </tr>

      <tr>
        <td>Tel</td>
        <td>
          <input type="text" name="tel">
        </td>
      </tr>
      <tr>
        <td>
          <br>
          <br>
          <input align="center" type="submit" value="Enviar">
        </td>
      </tr>

    </table>
  </form>
</body>

</html>

Answer 1

如果您希望按钮与右侧对齐，则可以将提交按钮的父td设置为colspan="2"，以便单元格将跨越表格中的两列，并指定{ {1}}

text-align: right;

h1 {

    text-align: center;
    color: blue;

}

body {

     background-color: #1AD5EA;
     text-align: center;
}

form {
    display: inline-block;
    text-align: center;
    }

td {
 /* text-align: center; */
  font-weight: bold;
}

input[type=submit] {
    padding:5px 55px;  
    border:5 none;
    border-radius: 15px;
    text-align:center; 
}


.submit {
  text-align: right;
}

Answer 2

由于您使用In [582]: a Out[582]: array([[[30, 23]], [[36, 88]], [[27, 15]], [[38, 61]], [[79, 14]]]) In [583]: a[...,1] -= 10 In [584]: a Out[584]: array([[[30, 13]], [[36, 78]], [[27, 5]], [[38, 51]], [[79, 4]]])来处理格式化，因此我认为您所需的内容不一定是CSS答案。

在您的情况下，如果您尝试将按钮对齐到文本输入框下方，则需要在上一个table中创建一个空白td以填补空白并对齐包含右侧按钮的下一个tr。

td

对于仅支持CSS的解决方案，最简单的下一步是删除所有<tr> <td> </td> <td> <br><br> <input align="center" type="submit" value="Enviar"> </td> </tr>引用，并依赖CSS来定位所有元素。

Answer 3

假设您希望按钮位于中心位置：

您要添加colspan="2" 在td中，其中包含您提交按钮

Answer 4

请尽量避免使用表格来定位元素，因为它永远不会让您完全控制您的定位，并且有些不赞成。

试试这个。

CSS：

    h1 {

  text-align: center;
  color: blue;

  }

 body {

 background-color: #1AD5EA;
 text-align: center;
 width:100%;
 }

 form {
display: inline-block;
text-align: center;
}

td {
/* text-align: center; */
font-weight: bold;
}

input[type=submit] {
padding:5px 55px;  
border:5 none;
border-radius: 15px;
margin:0 auto;  
}

HTML;

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

            <table> 

                <tr>
                    <td>Nombre</td>
                    <td><input type="text" name="nombre"></td>
                </tr> 

                <tr>
                    <td>Direcci&oacuten</td>
                    <td><input type="text" name="direccion"></td>
                </tr>

                 <tr> 
                    <td>Tel</td> 
                    <td><input type="text" name="tel"></td> 
                </tr>
                <tr> 

            </table> 
            <div> <input type="submit" value="Enviar" ></div>
    </form>

如何使用CSS对齐此提交按钮

4 个答案: