0

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

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

  1. 当我text-align:center使用占位符文本时，我仍然有那个填充将对齐推到右边一点。
  2. 当我在输入上设置 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;
}
4

1 回答 1

1

对于 的问题padding-left，您只是在左侧添加填充，因此文本不会居中是理所当然的。要么不添加任何填充，要么添加等量的padding-leftand padding-right。

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

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

input:-ms-input-placeholder { }

和：

input::-moz-placeholder { }

如果你想支持 Firefox < 19，你还应该包括：

input:-moz-placeholder { }
于 2013-06-17T22:37:04.157 回答