Html 文本对齐：就在 <select> 或 <option> 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7920677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align: right on <select> or <option>
提问by BenM
Does anyone know if it's possible to align text to the right of a <select>or more specifically <option>element in WebKit. This does not need to be a cross-browser solution including IE, but should be pure CSS if it is possible.
有谁知道是否可以将文本与WebKit 中的一个<select>或更具体<option>元素的右侧对齐。这不需要是包括 IE 在内的跨浏览器解决方案，但如果可能，应该是纯 CSS。
I have tried both:
我都试过：
select { text-align: right }and option { text-align: right }, but neither seems to have worked in WebKit (either Chrome, Safari or Mobile Safari.
select { text-align: right }和option { text-align: right }，但似乎都不适用于 WebKit（Chrome、Safari 或 Mobile Safari。
Any help gratefully received!
任何帮助表示感谢！
采纳答案by Frank Parent
You could try using the "dir" attribute, but I'm not sure that would produce the desired effect?
您可以尝试使用“dir”属性，但我不确定这会产生预期的效果吗？
<select dir="rtl">
<option>Foo</option>
<option>bar</option>
<option>to the right</option>
</select>
Demo here: http://jsfiddle.net/fparent/YSJU7/
回答by Laiacy
The following CSS will right-align both the arrow and the options:
以下 CSS 将右对齐箭头和选项：
select { text-align-last: right; }
option { direction: rtl; }<!-- example usage -->
Choose one: <select>
<option>The first option</option>
<option>A second, fairly long option</option>
<option>Last</option>
</select>回答by Martin Schilliger
The best solution for me was to make
对我来说最好的解决方案是让
select {
direction: rtl;
}
and then
进而
option {
direction: ltr;
}
again. So there is no change in how the text is read in a screen reader or and no formatting-problem.
再次。因此，在屏幕阅读器中阅读文本的方式没有变化，也没有格式问题。
回答by nheinrich
I think what you want is:
我想你想要的是：
select {
direction: rtl;
}
fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/
回答by Ashish Sharma
I was facing the same issue in which I need to align selected placeholder value to the right of the select box & also need to align options to right but when I have used direction: rtl; to select & applied some right padding to select then all options also getting shift to the right by padding as I only want to apply padding to selected placeholder.
我面临着同样的问题，我需要将选定的占位符值对齐到选择框的右侧，并且还需要将选项向右对齐，但是当我使用了方向时：rtl; 选择并应用一些正确的填充来选择然后所有选项也通过填充向右移动，因为我只想将填充应用于选定的占位符。
I have fixed the issue by the following the style:
我已通过以下样式解决了该问题：
select:first-child{
text-indent: 24%;
direction: rtl;
padding-right: 7px;
}
select option{
direction: rtl;
}
You can change text-indent as per your requirement. Hope it will help you.
您可以根据需要更改文本缩进。希望它会帮助你。
