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}
第一种方法:Html代码
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b")
var overFlow = $("#over")
b.click(function(){
overFlow.fadeIn()
$("#mask").css("background","#111")
$("#mask").css("opacity","0.8")
})
$("#close").click(function(){
overFlow.fadeOut()
$("#mask").css("background","#fff")
$("#mask").css("opacity","1")
})
drag($("#over"),$("#title"))
})
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"><a id="b" href="#">click</a></div>
</body>
</html>
Js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document
var evt = evt || window.event
var x = evt.offsetX?evt.offsetX:evt.layerX
var y = evt.offsetY?evt.offsetY:evt.layerY
if(overFlow.setCapture){
overFlow.setCapture()
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
}
doc.onmousemove = function(evt){
evt = evt || window.event
var xPosition = evt.pageX || evt.clientX
var yPosition = evt.pageY || evt.clientY
var newX = xPosition - x
var newY = yPosition - y
overFlow.style.left = newX
overFlow.style.top = newY
}
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture()
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
}
doc.onmousemove=null
doc.onmouseup=null
}
}
}
css代码
#over{
position: absolute
left: 300px
top: 200px
border: 1px solid black
display: none
background: #cccccc
cursor: default
width: 300px
z-index: 10
opacity: 1
}
#title{
border: 1px solid #1840C4
background: #95B4DC
padding: 2px
font-size:12px
cursor: default
}
#close{
cursor: pointer
margin-right: 1px
overflow: hidden
}
#content{
border: 1px solid #C2D560
background: #EFF4D7
}
#t{
margin-right:145px
}
#mask{
z-index: 1
background: #fff
width: 1024px
height: 800px
}
#b{
position: absolute
left: 200px
top: 100px
}
body{
padding: 0px
margin: 0px
}
#over{
background: transparent
}
第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:noneposition:absolute"></iframe><div id="show_upload">nothing...</div>'
页面加载loading中:<div id="body_loading" onClick="loaded()"><img src="__PUBLIC__/images/body_load.gif"></div>
关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>
打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
// 消息框loading
function loading(){
var o = $('#body_loading')
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px")
o.fadeIn("fast")
}
// 消息框消失
function loaded(){
var o = $('#body_loading')
o.fadeOut("fast")
}
// 隐藏浮动窗口
function hideupload(){
$('#show_upload').hide()
$('#show_upload_iframe').hide()
}
// 弹出浮动窗口
function showupload(ajaxurl){
loading()
var o=$('#show_upload')
var f=$('#show_upload_iframe')
var top = 200
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded()
o.html(res)
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px")
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2)
}
o.css("top",top+"px")
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')})
f.show()
o.show()
}
})
}
路径的问题啊。/template/images/style.css，这个就是你要调用的css文件的路径。
最前面加了一个反斜杠，表示是从网站根目录开始，即调用网站根目录下的template目录下的images目录下的style.css文件
给你举个例子：
网站根目录下有a,b,c三个文件夹
我现在有个网页在a这个文件夹下，有个style.css文件在c这个文件夹下
a文件夹下的网页中有句调用css的代码<link href="c/style.css" />
这时候你打开a文件夹下的这个网页，你会发现样式没加载成功。为什么？就是因为你的css文件的路径不对，你的网页在a文件夹下，调用的时候写的是c/style.css，这个时候的路径被认为是a文件夹下的c文件夹下的style.css文件，但实际上a文件夹下并没有这个c文件夹。。。所以出错了。
所以正确的写法是：/c/style.css，表示是根目录下的c文件夹下的style.css，这样就对了
