html - 在 div 中对齐输入

Question

我有这样的html代码：

<div class="one1">
<div class="one">
<input class="two" name="user[email]" placeholder="Ваш e-mail" required="required" type="email">
</div>
</div>​

和CSS

.one1{
    background-color: #000;
    width:200px;
    height: 200px;
}
.one{
    margin: 0 auto;
    background-color: #cecece;
    width:180px;
    height: 200px;
}
.two{
    width: 100%;
    margin: 0;
    padding: 0;
}
​

但是为什么输入在右边框上有点大？由于它是一个 div，如何清楚？（也会有圆角边框和阴影）

这里：

关联

Answer 1

你去掉marginandpadding但输入也有border。所以尝试添加border:none.input

演示

Answer 2

因为它包括边框宽度。尝试：

.two{
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

Answer 3

它是由用户代理样式表添加的边框引起的。添加border: 0;到two班级。

.two{
    width: 100%;
    margin: 0;
    padding: 0;
    border:0;
}

Answer 4

最好是在您输入的左右两侧删除 1px 并手动设置它而不是 100%

.two{
    width: 178px;
    margin: 0;
    padding: 0;
    border:1px solid black;
}

Answer 5

如果您想将边框保持在 1 px，请执行以下操作：

.two {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

浏览器正在根据内容+填充计算输入的宽度（100％），您希望指示浏览器也包括边框。

Answer 6

你可以使用这个 CSS 属性

input.two{
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}