如何显示一个html选择的选项并排只使用css？

问题描述：

我需要有一个HTML的选项中进行选择（与选项“大小”可以这么想象它像一个5行文字区域）显示并排，想在这个jfiddle如何显示一个html选择的选项并排只使用css？

我可以实现我的使用此css的目标

select { 
    width: 100%; 
} 
select#myselect option { 
    width: 6%; 
    float: left; 
    border: 1px solid; 
    text-align: -webkit-center; 
    border-color: darkgray; 
}

但它的工作完美只在铬。在Firefox中，“float：left”这个选项似乎不起作用，并且选项显示在另一个下面。在Safari中，选项“宽度：6％”不起作用，选项元素占选区宽度的100％。边界都不起作用，但这不重要

在所有浏览器中都可以实现相同的chrome结果吗？

编辑：添加“显示：内联”的选项，让他们通过在Firefox并排，但所有在此的jsfiddle去一个单行，导致最后的元素完全不显示，像

Jsfiddle

答

将display: inline;添加到CSS中。

无法在safari上测试。 – wazz

应该是更具体。你添加到'select＃myselect选项'css？ – wazz

小提琴：https：//jsfiddle.net/wazz/uo48vzpy/ – wazz

答

Safari浏览器不支持inline和inline-block诺尔左侧漂浮<option>和，我想，有良好的原因：第一，导致<select><option>不彪在上班途中和，secoundary，导致display:inline是完全与元素本身的iphone渲染不兼容; 导致此，也不支持控制该元素的with的可能性。

如何显示一个html选择的选项并排只使用css？

相关推荐