css+js实现select列表横向排列效果代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>请选择ABCDEFGHI_select横排效果_管理资源吧</title> 
</head> 
<body> 
<style> 
*{font-size:12px;} 
A.s_l { 
    BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px 
} 
A.s_l:hover { 
    BORDER: #003366 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px 
} 
A.s_r { 
    BORDER: #dddddd 1px solid;BACKGROUND: #ffffff; PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px 
} 
A.s_r:hover { 
    BORDER: #003366 1px solid;BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px 
} 
input    {BORDER: #aaa 1px solid;width:65px;height:23px;PADDING: 4px 6px 0px 6px;background:url(http://bbs.blueidea.com/attachment.php?aid=90338&noupdate=yes) no-repeat 95% center;} 
.span1    {position:relative;top:3px;} 
.span2    {position:relative;left:-3px;top: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="###" _ewebeditor_ta_href="%23%23%23">A</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">B</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">C</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">D</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">E</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">F</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">G</A><A class=s_l  
href="###" _ewebeditor_ta_href="%23%23%23">H</A><A class=s_r  
href="###" _ewebeditor_ta_href="%23%23%23">I</A></span> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20sele(o)%7B%20%0D%0A%20%20%20%20var%20oobj%3Ddocument.getElementById(%22select%22)%20%0D%0A%20%20%20%20if%20(oobj.style.display%3D%3D%22none%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20oobj.style.display%3D%22%22%20%0D%0A%20%20%20%20%20%20%20%20var%20obj%3Doobj.getElementsByTagName(%22a%22)%2Cj%3Dobj.length%20%0D%0A%20%20%20%20%20%20%20%20for%20(var%20i%3D0%3Bi%3Cj%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bi%5D.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.value%3Dthis.innerHTML%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20oobj.style.display%3D%22none%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20oobj.style.display%3D%22none%22%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程