html - 为什么提交按钮的宽度小于其他输入字段的宽度?
问题描述
我创建了这个注册表单。所有字段都应该是相同的长度。但是,由于某种原因,提交按钮的宽度比输入字段的宽度窄,即使我对所有输入字段都应用了 350 像素的宽度。以下是注册表单的代码:
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa;
}
body {
font-family: Montserrat,sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em;
}
.button {
margin: 0 .5em;
border-radius: .5em;
padding: .5em 1.25em;
font-weight: 700;
min-width: 80px;
}
.button-submit {
margin: 1.25em 0 0;
padding: .6em 1.25em;
width: 100%;
background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
border: solid 1.5px var(--main-color);
color: var(--main-color);
}
.button-submit:hover {
background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
border: solid 1.5px var(--secondary-color);
color: var(--light-color);
transition-duration: .4s;
}
.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 35px;
}
.registration-field {
width: 350px;
}
.registration-form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
@media screen and (max-width:565px) {
body {
margin-top: 130px;
}
}
<form class="registration-form">
<h2>Create an account</h2>
<input
class="input-field registration-field"
type="text"
name="name"
placeholder="Name"
/>
<input
class="input-field registration-field"
type="email"
name="email"
placeholder="Email"
/>
<input
class="input-field registration-field"
type="password"
name="password"
placeholder="Enter a password"
/>
<input
class="input-field registration-field"
type="password"
name="passwordConfirmation"
placeholder="Confirm your password"
/>
<input
class="button button-submit registration-field"
type="submit"
value="Register"
/>
</form>
所有的填充和边距都是相同的,所以我不知道发生了什么。知道问题是什么吗?
解决方案
您的文本字段两侧有额外的填充 (1em)。如果您希望它们正好是 350px 宽,您可以添加box-sizing: border-box
到您的输入中。
变化:
.input-field {
box-sizing: border-box;
}
片段:
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa;
}
body {
font-family: Montserrat,sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em;
}
.button {
margin: 0 .5em;
border-radius: .5em;
padding: .5em 1.25em;
font-weight: 700;
min-width: 80px;
}
.button-submit {
margin: 1.25em 0 0;
padding: .6em 1.25em;
width: 100%;
background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
border: solid 1.5px var(--main-color);
color: var(--main-color);
}
.button-submit:hover {
background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
border: solid 1.5px var(--secondary-color);
color: var(--light-color);
transition-duration: .4s;
}
.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 35px;
box-sizing: border-box;
}
.registration-field {
width: 350px;
}
.registration-form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
@media screen and (max-width:565px) {
body {
margin-top: 130px;
}
}
<form class="registration-form">
<h2>Create an account</h2>
<input
class="input-field registration-field"
type="text"
name="name"
placeholder="Name"
/>
<input
class="input-field registration-field"
type="email"
name="email"
placeholder="Email"
/>
<input
class="input-field registration-field"
type="password"
name="password"
placeholder="Enter a password"
/>
<input
class="input-field registration-field"
type="password"
name="passwordConfirmation"
placeholder="Confirm your password"
/>
<input
class="button button-submit registration-field"
type="submit"
value="Register"
/>
</form>
推荐阅读
- ios - 使用其他属性初始化 @Binding 时的问题
- r - 在闪亮中,使用仪表板加,如何控制小部件样式?
- r - 如何在ggplot中向轴添加超类别?
- google-app-engine - 如何从 Google Cloud Function 上下文使用 Google App Engine Admin API 进行身份验证
- python - 如何在 Pandas 中访问 applymap 函数中的索引?
- lua - 使用迭代器的 Lua 迭代器
- java - 通用类型不适合
- django - 如何防止调用外部api的Django视图在被GET请求调用时被淹没?
- jfreechart - JFreeChart,系列不相互绘制
- html - 侧边栏背景图片不显示?