Chrome与<select> <option>标记的display-inline一起出现问题
dsh*_*dsh 30 css html5 google-chrome
我遇到了一个问题,我无法在Firefox和Chrome上使用相同的CSS来呈现相同的内容.它们不是一个包含24个值的垂直选择框,而是在Firefox中彼此相邻排列:
在Chrome中,它们显示为垂直多选框.
缩写3小时示例的完整代码:
<html>
<head>
<style type="text/css">
option { display: inline; }
</style>
</head>
<body>
<form>
<select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</body>
</html>
在Chrome中,选项不会显示为内联.
任何解释为什么这个代码不起作用,有没有其他方法来实现相同的布局？
我不认为你应该(可以？)<option>像这样内联元素.请尝试使用复选框.像这样的东西:
<!DOCTYPE html>
<html>
<head>
<title>Inline Options</title>
<style>
ul {
list-style:none;overflow:hidden;
}
ul li {
lit-style:none;
float:left;
position:relative;
}
ul li input[type="checkbox"] {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
ul li input:checked + label {
background:blue;
}
</style>
</head>
<body>
<form action="#" method="get">
<ul>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox1" />
<label for="checkbox1" class="">Option 1</label>
</li>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox2" />
<label for="checkbox2" class="">Option 2</label>
</li>
<li>
<input type="checkbox" name="aryHours[]" id="checkbox3" />
<label for="checkbox3" class="">Option 3</label>
</li>
</ul>
</form>
</body>
</html>
- 谢谢你的回复.我不同意不能内联选项 - 在FireFox中尝试我的代码.也就是说,这种方法很聪明,并且具有正确的基本功能.但是,我认为有几个功能差异非常重要.由于这是一个多重选择,因此用户可以在所需的小时内按住移位和拖动.在此示例中,用户必须单独选择每个小时.在我的实际应用程序中,有24个选项,而不是3.必须单击最多24次不是用户友好的. (2认同)
- @dsh - 非常正确,但只是'因为一个(甚至多个)浏览器允许你逃脱它并不意味着你应该这样做.我不确定这些规格会说些什么,但我会认为Firefox允许它是可疑的 - 我的意思是`<select>`是风格和自定义的更难控制之一.根据我的经验,任何过去的字体和颜色,你可能会诉诸黑客. (2认同)
- 我认为你是对的,显示属性从来没有意味着选项.我用你的代码来模拟我想要做的事情,并添加了一些javaScript,使其更像是一个复选框.谢谢. (2认同)
| 归档时间： |
|
| 查看次数： |
3403 次 |
| 最近记录： |