<html>
<head>
<style>
.div1{
width:600px
height:200px
font-size:13px
}
.div select{
width:200px
}
.div select option{
width:150px
height:30px
}
</head>
<body>
<div class='div1'>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>
目前在select元素中你使用css: text-align, 你会发现根本不起作用。select { text-align: right }option { text-align: right }
似乎在所有基于webkit的浏览器没有对select实现text-align这个CSS属性。
这里有一些临时的解决方案
1) 简单点的使用padding使其“看上去”对齐
比如： 这里比较适合宽度固定的场合，只要padding合适，效果还是不错的
select { ... padding: 0 0 0 20px}
示例 http://jsfiddle.net/P5k4D/1/
2） 使用一些UI库实现
比如jQueryUI的select menu
优点是可以解决select控制在各个浏览器界面不一致的问题。
3） 居右对齐： 可以使用rtl属性来来控制，
<select dir="rtl"> <option>Foo</option> <option>bar</option> <option>to the right</option></select>
写成CSS的话则为：
select {direction: rtl}
您好！您说的这个是用css+js实现的。参考代码如下：<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>请选择ABCDEFGHI_select横排效果</title>
</head>
<body>
<style>
*{font-size:12px}
A.s_l {
BORDER: #dddddd 1px solidBORDER-right: #dddddd 0px solidBACKGROUND: #ffffffPADDING: 4px 6px 2px 6pxTEXT-DECORATION: noneline-height:12px
}
A.s_l:hover {
BORDER: #003366 1px solidBORDER-right: #dddddd 0px solidBACKGROUND: #0063dcCOLOR: #ffffffTEXT-DECORATION: noneline-height:12px
}
A.s_r {
BORDER: #dddddd 1px solidBACKGROUND: #ffffffPADDING: 4px 6px 2px 6pxTEXT-DECORATION: noneline-height:12px
}
A.s_r:hover {
BORDER: #003366 1px solidBACKGROUND: #0063dcCOLOR: #ffffffTEXT-DECORATION: noneline-height:12px
}
input{BORDER: #aaa 1px solidwidth:65pxheight:23pxPADDING: 4px 6px 0px 6pxbackground:url(images/a.jpg) no-repeat 95% center}
.span1{position:relativetop:3px}
.span2{position:relativeleft:-3pxtop:1px}
</style>
<span class="span1"><input type="text" value="请选择" onclick="sele(this)"></span>
<span class="span2" id="select" style="display:none"><A class=s_l
href="###">A</A><A class=s_l
href="###">B</A><A class=s_l
href="###">C</A><A class=s_l
href="###">D</A><A class=s_l
href="###">E</A><A class=s_l
href="###">F</A><A class=s_l
href="###">G</A><A class=s_l
href="###">H</A><A class=s_r
href="###">I</A></span>
<script>
function sele(o){
var oobj=document.getElementById("select")
if (oobj.style.display=="none"){
oobj.style.display=""
var obj=oobj.getElementsByTagName("a"),j=obj.length
for (var i=0i<ji++){
obj[i].onclick=function(){
o.value=this.innerHTML
oobj.style.display="none"
}
}
}
else oobj.style.display="none"
}
</script>
</body>
</html>
您可以自己修改相应的样式和代码！希望对您有帮助！
