我有一个简单的文本输入和一个选择列表。我用类似的方式设置它们,我需要它们具有相同的文本缩进。
如果我将文本缩进设置为px值,那么它们在我的iPhone上缩进相同的数量,但在Chrome中它们是不同的。有没有办法标准化这个跨设备和浏览器?
http://codepen.io/anon/pen/pnvqJ
<input placeholder="Last name" type="text" maxlength="25" name="last_name" size="60" value="" >
<select name="title">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
input, select {
display: block;
border: none;
text-indent: 10px;
width: 100%;
background: grey;
}
答案 0 :(得分:1)
只需单独格式化,使用一种样式选择其他输入
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
select {
display: block;
border: none;
text-indent: 10px;
width: 100%;
background: grey;
}
input{
display: block;
border: none;
width: 100%;
background: grey;
text-indent:15px;
}
如果对你来说很重要,那么两个人都会有一个类别(里面会有很多样式,你可以做到这一点
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
input, select {
display: block;
border: none;
text-indent: 10px;
width: 100%;
background: grey;
}
input{
text-indent:15px !IMPORTANT;
}
在这个例子中基本上做同样的事情。 !IMPORTANT
表示即使在其他样式标记中它已经具有其他值,也会使用它。两种方式的结果是相同的()
答案 1 :(得分:0)
我不擅长设计,仍然应用了一些逻辑, 再添加一个类,
select {
text-indent: 5px !important;
}
<强> Example 强>
我认为select元素默认需要更多额外缩进,这就是套管问题,如果您只针对特定浏览器遇到此问题,请尝试仅针对这些特定浏览器应用此类。
答案 2 :(得分:0)
似乎select
具有
宽度的固有最小缩进。您是否考虑过计算the pixel width of NBSP并将其设置为JS中text-indent
的{{1}}?