Fatal编程技术网
  • css/
  • Css Chrome问题与<；选择>&书信电报；选项>；标签

Css Chrome问题与<；选择>&书信电报；选项>；标签

css html google-chrome

Css Chrome问题与<；选择>&书信电报；选项>；标签,css,html,google-chrome,Css,Html,Google Chrome,我遇到了一个问题，我无法获得相同的CSS来在Firefox和Chrome上呈现相同的内容。在Firefox中，它们不是一个包含24个值的垂直选择框，而是彼此相邻的一行： 在Chrome中，它们显示为垂直的多重选择框 简短的3小时示例的完整代码： <html> <head> <style type="text/css"> option { display: inline; } </style> </head

我遇到了一个问题，我无法获得相同的CSS来在Firefox和Chrome上呈现相同的内容。在Firefox中，它们不是一个包含24个值的垂直选择框，而是彼此相邻的一行：

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


选项{显示：内联；}
1.
2.
3.
在Chrome中，选项不显示为内嵌

有没有解释为什么这个代码不起作用，还有没有其他方法可以实现相同的布局？

我认为您不应该（可以？）让
元素像这样内联。尝试使用复选框代替。比如：


内联选项
保险商实验室{
列表样式：无；溢出：隐藏；
}
ulli{
灯光风格：无；
浮动：左；
位置：相对位置；
}
ul li输入[type=“checkbox”]{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
宽度：100%；
身高：100%；
不透明度：0；
}
ul li输入：选中+标签{
背景：蓝色；
}

    

  • 
选择1

    • 

  • 
选择2

    • 

  • 
选择3

    •
Firefox的行为可能是由错误引起的

如前所述，尽量避免使用内联on选项

谢谢您的回复。我不同意选项不能内联——在FireFox中试试我的代码。也就是说，这种方法很聪明，具有正确的基本功能。然而，我认为有几个重要的功能差异。由于这是一个多选，用户可以按住shift键并拖动所需的时间。在本例中，用户必须单独选择每个小时。在我的实际应用程序中，有24个选项，而不是3个。必须最多点击24次对用户来说是不友好的。@dsh-非常正确，但仅仅因为一个（甚至多个）浏览器允许您使用它，并不意味着您应该这样做。我不确定规范会说什么，但我认为Firefox允许它是可疑的-我的意思是
是更难设计和定制的控件之一。根据我的经验，任何超过字体和颜色的东西，你可能都在求助于黑客。我认为你是对的，显示属性从来没有用于选项。我使用您的代码来模拟我试图做的事情，并添加了一些javaScript使其更像一个复选框。谢谢。如果在iphone上观看，会发生什么？ 
<!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>