Chrome显示内嵌问题<select><option>标签

我遇到了一个问题，我无法获得CSS的相同位置以在Firefox和Chrome中呈现相同的内容。相反，24个值的垂直选择框，它们都出现在一个线旁在Firefox对方：Chrome显示内嵌问题<select><option>标签

在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中，该选项不内嵌显示。

任何解释为什么此代码不起作用，并有任何其他方式来实现相同的布局？

来源

2012-08-31 dsh

我不认为你应该（可以）使<option>元素内联。尝试使用复选框。喜欢的东西this：

<!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>

来源

2012-08-31 18:16:20

感谢您的答复。我不同意这些选项不能内联 - 在FireFox中尝试我的代码。也就是说，这种方法很聪明，并具有正确的基本功能。但是，我认为有几个功能差异很重要。由于这是一个多重选择，用户可以按住Shift键并拖动所需的小时数。在这个例子中，用户必须单独选择每个小时。在我的真实应用程序中，有24个选项，而不是3个。点击24次并不方便用户使用。 – dsh

@dsh - 非常真实，但只是因为一个（甚至多个）浏览器允许你摆脱它并不意味着你应该这样做。我不确定规格会说什么，但是我会认为Firefox允许将其视为可疑的事实 - 我的意思是'

Chrome显示内嵌问题<select><option>标签

回答