html - 登录表单提交按钮响应问题？

Question

我编写了一个登录表单，但它的提交按钮存在响应问题，而且我希望表单内的填充也减少。我确实知道媒体查询，但我不想使用它们，所以如果你们可以在不使用媒体查询的情况下提出解决方案:

/* VMS Forms ((START)) */

.vms-form-container {
	margin: 0 auto;
}

.vms-form-container a {
	text-decoration: none;
}

.vms-form-footer a:hover {
	color: white;
}

.vms-form-footer a:visited {
	color: white;
}

.vms-form {
	text-align: center;
    border: 1px solid #a68888;
    padding: 9% 17% 8% 17%;
    font-family: Arial;
}

.vms-form-footer {
	text-align: center;
    padding: 7% 17% 7% 17%;
    background-color: rgb(37, 80, 87);
    color: white;
}

.vms-form-inner {
	margin-top: 37px;
}

.vms-form-inner input {
	display: block;
	margin:0 auto;
	padding: 7px;
	width: 73%;
	margin-bottom: 15px;
	border: 1px solid #d6cfcf;
}

.vms-form-inner input:focus {
	border: 1px solid rgb(221,129,126);
}

.vms-form-inner .vms-form-submit {
	background-color: rgb(199, 109, 106);
	display: block;
	padding: 7px 121px 7px 121px;
    color: white;
    border-radius: 2px;
}

.vms-form-inner .vms-form-submit span {
	position: absolute;
    margin-top: -25px;
    margin-left: 130px;
    display: block;
    background-color: rgb(184, 98, 95);
    padding: 5px 11px 5px 11px;
    border-radius: 2px;
}

.vms-form-inner a {
	text-align: right;
    display: block;
    width: 342px;
    font-size: 12px;
}

.vms-form-title {
	font-size: 175%;
    color: #483535;
    letter-spacing: 2.5px;
    margin-bottom: 10px;
}

.vms-form-title-bold {
    font-weight: bold;
}

.vms-form-title-bottom-border {
    width: 80px;
    height: 1px;
    margin: 0px auto;
    border-bottom: 2px solid #483535;
}



/* VMS Forms ((END)) */

<div class="container" style="padding-top: 60px;padding-bottom: 60px;">

	<!-- VMS Form -->
	<div class="vms-form-container col-sm-8">
		<div class="vms-form">
			<div class="vms-form-title">
				VENUE <span class="vms-form-title-bold">LOGIN</span>
			</div>
			<div class="vms-form-title-bottom-border"></div>
			<div class="vms-form-inner">
				<form>
					<input type="text" name="email" placeholder="Email">
					<input type="password" name="password" placeholder="Password">
					<br>
					<button type="submit">
					<div class="vms-form-submit">LOGIN <span>✔</span></div>
					</button>
					<a href="#!">> Forgot Password ? Reset</a>
				</form>
			</div>
		</div>
		<div class="vms-form-footer">
			<a href="#!">
				<img src="../images/vms/icon-vms-form-footer.png">
				> or create an account
			</a>
		</div>
	</div>
</div>

所有屏幕的预期输出:

Answer 1

尝试为登录按钮提供宽度属性，就像输入一样。 还可以直接为按钮设置样式，而不是将样式化的 div 放入其中。

.vms-form-container {
    margin: 0 auto;
}
.vms-form-container a {
    text-decoration: none;
}
.vms-form-footer a:hover {
    color: white;
}
.vms-form-footer a:visited {
    color: white;
}
.vms-form {
    text-align: center;
    border: 1px solid #a68888;
    padding: 9% 17% 8% 17%;
    font-family: Arial;
}
.vms-form-footer {
    text-align: center;
    padding: 7% 17% 7% 17%;
    background-color: rgb(37, 80, 87);
    color: white;
}
.vms-form-inner {
    margin-top: 37px;
}
.vms-form-inner input {
    display: block;
    margin: 0 auto;
    padding: 7px;
    width: 73%;
    margin-bottom: 15px;
    border: 1px solid #d6cfcf;
    box-sizing: border-box;
}
.vms-form-inner input:focus {
    border: 1px solid rgb(221, 129, 126);
}
.vms-form-inner .vms-form-submit {
    background-color: rgb(199, 109, 106);
    display: inline-block;
    padding: 7px;
    width: 73%;
    color: white;
    border-radius: 2px;
    border: none;
    position: relative;
}
.vms-form-inner .vms-form-submit span {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 14px;
    display: block;
    background-color: rgb(184, 98, 95);
    padding: 5px 11px 5px 11px;
    border-radius: 2px;
}
.vms-form-inner a {
    text-align: right;
    display: block;
    width: 342px;
    font-size: 12px;
}
.vms-form-title {
    font-size: 175%;
    color: #483535;
    letter-spacing: 2.5px;
    margin-bottom: 10px;
}
.vms-form-title-bold {
    font-weight: bold;
}
.vms-form-title-bottom-border {
    width: 80px;
    height: 1px;
    margin: 0px auto;
    border-bottom: 2px solid #483535;
}

<!-- VMS Form -->
	<div class="vms-form-container col-sm-8">
		<div class="vms-form">
			<div class="vms-form-title">
				VENUE <span class="vms-form-title-bold">LOGIN</span>
			</div>
			<div class="vms-form-title-bottom-border"></div>
			<div class="vms-form-inner">
				<form>
					<input type="text" name="email" placeholder="Email">
					<input type="password" name="password" placeholder="Password">
					<br>
					<button type="submit" class="vms-form-submit">
					LOGIN
					<span>✔</span></div>
					</button>
					<a href="#!">> Forgot Password ? Reset</a>
				</form>
			</div>
		</div>
		<div class="vms-form-footer">
			<a href="#!">
				<img src="../images/vms/icon-vms-form-footer.png">
				> or create an account
			</a>
		</div>
	</div>