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？（也会有圆形边框和阴影）

这里：

link

Answer 1

您删除了margin和padding，但输入也有border。因此，请尝试为border:none添加input。

Demo

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并将其设置为manualy而不是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％），您也希望指示broswer包含边框。

Answer 6

你可以使用这个css属性

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

对齐div中的输入

6 个答案: