Question

由SASS生成，我正在尝试编写一个具有中心占位符但左对齐（带有一些填充）输入文本的输入。我对CSS仍然有些新意，所以请忽略任何无知。

在输入css中设置padding-left，我生成了2个问题：

当我text-align:center占位符文本时，我仍然有那个填充向右推动对齐。
当我在输入上设置50％的宽度时，它不考虑填充，因此我得到几个像素+父容器的50％。

以下是我的SASS代码：

input::-webkit-input-placeholder {
 color:white;
 text-align:center;
}
input[type=text],input[type=password],input[type=tel],input[type=email] {
 height:$formiconheight;
 width:$formItemMaxWidth;
 margin:5px;
 border-radius:5px;
 padding-left:$formiconwidth + $formInputPadding;
}

Answer 1

对于padding-left的问题，您只是在左侧添加填充，因此可以理解文本不会居中。要么不添加任何填充，要么添加相等的金额padding-left和padding-right。

CSS中的宽度，仅适用于内容框。不是内容，填充和边框。如果要包含填充，则应包括box-sizing: border-box（和-moz-box-sizing: border-box for Firefox）。这告诉浏览器使宽度包含填充。

此外，您只为占位符包含WebKit的前缀。 Firefox和IE还允许您设置占位符的样式，因此您应该为两者包含另一个规则集：

input:-ms-input-placeholder { }

和

input::-moz-placeholder { }

如果你想支持Firefox＆lt; 19，你还应该包括：

input:-moz-placeholder { }

输入占位符没有填充

1 个答案: