Question

我正在尝试制作一个简单的两列html表单，输入字段并排，居中对齐，但标签在输入字段的顶部对齐。

我还希望标签上有一些顶部填充物，以便给它们提供喘息的空间。我还希望我已经设法使“提交”按钮的中心对齐，但其余部分都在挣扎。我已经调整了我的HTML数小时，但无济于事。仅提供帮助以使结构正确，不胜感激。请在下面查看我的HTML和CSS代码，以及为所需输出提供的图像

enter image description here

P.S。我知道引导程序可能是解决此问题的最佳方法，但我希望能够在纯HTML和CSS中获得所需的结果。

<!DOCTYPE html>
<html>
<head>

    <style>


        * {
            box-sizing: border-box;
        }


        .column {
            float: left;
        }

        .left {
            width: 50%;
            display: block;
        }

        .right {
            width: 50%;
            display: block;
        }

        .sign-in-button {
            margin-top: 25px;
            width: 200px;
            height: 50px;
        }

        label {
            margin-top: 15px;
        }

    </style>


</head>




<body>




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


    <div class="row" align="center">

        <div class="column left">
            <label for="name">Name</label><br>
            <input type="text" name="name">
        </div>


        <div class="column right">
            <label for="company">Company</label><br>
            <input type="text" name="company">
        </div>


        <div class="column left">
            <label for="visiting">Visiting<br>
                <input type="text" name="visiting">
        </div>


        <div class="column right">
            <label for="badge">Badge</label><br>
            <input type="text" name="badge">
        </div>

    </div>


    <div align="center">
        <input class="sign-in-button" type="submit" value="Sign In">
    </div>

</form>





</body>
</html>

Answer 1

您可以使用flex来实现。

示例代码：

func foo(variable: String) -> Bool{
    //do stuff
    return true //or false
}

//You call the function by this:
var boolVariable = foo("Hello World")

.row {
      display: flex;
      flex-direction: row;
      justify-content:space-around;
      padding-top: 10px;
 }
 .btn {
      padding: 10px;
 }

希望这会有所帮助！

Answer 2

这就是我使用flex的方式。

* {
  box-sizing: border-box;
}
.form{
  padding:.5rem;
}
.form__group{
  padding:1rem;
}
.form__controls{
  margin-top:.5rem;
}
.form__input{
  width:100%;

}
.form__submit{
  margin-top: .5rem;
  width: 10rem;
  height: 3rem;
}

.grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grid__col{
  flex-basis: 50%;
}

<form class="form" action="georgeWelcomePage.php" method="post">
    <div class="grid">
        <div class="form__group grid__col">
            <label class="form__group-title" for="name">Name</label>
            <div class="form__controls">
                <input id="name" class="form__input" type="text" name="name">
            </div>
        </div>

        <div class="form__group grid__col">
            <label class="form__group-title" for="company">Company</label>
            <div class="form__controls">
                <input id="company" class="form__input" type="text" name="company">
            </div>
        </div>

        <div class="form__group grid__col">
            <label class="form__group-title" for="visiting">Visiting</label>
            <div class="form__controls">
                <input id="visiting" class="form__input" type="text" name="visiting">
            </div>
        </div>

        <div class="form__group grid__col">
            <label class="form__group-title" for="badge">Badge</label>
            <div class="form__controls">
                <input id="badge" class="form__input" type="text" name="badge">
            </div>
        </div>
        <div class="form__group">
            <input class="form__submit" type="submit" value="Sign In">
        </div>
    </div>
</form>

Answer 3

我已经重新格式化了您的html，但请问这是否可行：

        * {
            box-sizing: border-box;
        }

       .row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-top: 10px;
            text-align: left;
         }
         .btn {
              padding: 10px;
         }
         .column{
            padding: 1em;
         }


    </style>


</head>




<body>




<form action="georgeWelcomePage.php" method="post">
  <div class="row" align="center">

        <div class="column left">
            <label for="name">Name</label><br>
            <input type="text" name="name"><br>
            <label for="visiting">Visiting<br>
            <input type="text" name="visiting"><br>
        </div>


        <div class="column right">
            <label for="company">Company</label><br>
            <input type="text" name="company"><br>
            <label for="badge">Badge</label><br>
            <input type="text" name="badge"><br>
        </div>

    </div>


    <div align="center">
        <input class="sign-in-button" type="submit" value="Sign In">
    </div>

</form>

2列HTML表单，标签左对齐，并且提交按钮居中

3 个答案: