Question

我正在尝试将提交button置于底部。

以下是代码：

* {
  margin: 0px;
  padding: 0px;

}

body {
  font-size: 120%;
  background: #F8F8FF;

}

.header {
  width: 30%;
  margin:50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align:center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;


}

form, .content {
  width: 576px;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;

}

.input-group {
  margin: 10px 0px 10px 0px;
}

.input-group label {
  display: block;
  text-align: left;
  margin: 3px;

} 

.input-group input {
  height: 20px;
  width: 60%;
  padding: 5px 10px;
  font-size: 1em;
  border-radius: 1px;
  border: 1px solid gray;
  margin-left: 3px;
} 

.btn {
  padding: 8px;
  font-size: 1em;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
  margin:0 auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register-Art and chill</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div class="header">
  <h2> Register </h2>
</div>

<form method="post" action="register.php">
  <div class="input-group">
    <label> Username </label>
    <input type="text" name="username">
  </div>
  <div class="input-group">
    <label> Email </label>
    <input type="email" name="email">
  </div>
  <div class="input-group">
    <label> Password </label>
    <input type="password" name="password_1">
  </div>
  <div class="input-group">
    <label> ConfirmPassword </label>
    <input type="password" name="password_2">
  </div>
  <div class="input-group">
    <button type="submit" class="btn"> Register </button>
  </div>
   </form>

 </body>
</html>

Answer 1

用以下代码替换.btn CSS类：

.btn {
   padding: 8px;
   font-size: 1em;
   color: white;
   background: #5F9EA0;
   border: none;
   border-radius: 5px;
   margin:0 auto;
   display:block;
}

问题是默认显示：inline-block

Answer 2

将 display：block; 添加到.btn类

为了使其更整洁干净，请使用以下代码替换您的html： -

prefersStatusBarHidden: Bool

并将其添加到您的CSS： -

<form method="post" action="register.php">
    <div class="form-inner">

        <div class="input-group">
            <label> Username </label>
            <input type="text" name="username">
        </div>

        <div class="input-group">
            <label> Email </label>
            <input type="email" name="email">
        </div>

        <div class="input-group">
            <label> Password </label>
            <input type="password" name="password_1">
        </div>

        <div class="input-group">
            <label> ConfirmPassword </label>
            <input type="password" name="password_2">
        </div>

        <div class="input-group">
            <button type="submit" class="btn"> Register </button>
        </div>
    </div>
</form>

此处的实例： - https://jsfiddle.net/sq6zow6v/

Answer 3

你可以把text-align：center;在按钮所在的容器上，即.input-group。当然，如果你把它放在.input-group中，那么其父元素是.input-group的所有其他元素也会居中，所以你可能只需要为按钮创建一个类或者在按钮上放一个内联样式＆＃39; s .input-group parent。

CSS

.input-group-btn {
text-align:center;
}

HTML

<div class="input-group input-group-btn">
        <button type="submit" class="btn"> Register </button>
    </div>

如何居中按钮

3 个答案: