Question

我正在使用以下html来显示一个选择框。我想显示具有固定宽度的选择框，如果有任何选项更长，我希望看到滚动条。以下适用于chrome和firefox，但它在safari中不起作用。

有什么想法吗？

<!DOCTYPE html>
    <html>
       <head>
          <style type="text/css">
             select.dualList {
             width:100%;
             height:300px;
             overflow-x: auto;
             }
          </style>
       </head>
       <body>
          <table>
             <tr >
                <td style="width:100px">
                   <select multiple="multiple" class="dualList" id="sourceList" >
                      <option value="item11">Item 1 This is my item 1. It should scroll</option>
                      <option value="item22">Item 2fsdsfsdf asdf asfsdas</option>
                      <option value="item33">Item 3</option>
                      <option value="item44">Item 4</option>
                      <option value="item55">Item 5</option>
                   </select>
                </td>
             </tr>
          </table>
       </body>
    </html>

Answer 1

首先，它在我的Firefox 47（Windows 10 x86_64）中不起作用。

其次，尽管我们中的许多人都希望只使用CSS规则来渲染像<h:dataTable value="#{playersBean.sortDataModel}" var="t" border="1"> <h:column> <f:facet name="header"> <h:commandLink action="#{playersBean.sortDataByRanking()}"> Ranking </h:commandLink> </f:facet> #{t.ranking} </h:column>..... .... </h:dataTable>元素这样的东西，但事实并非如此，并且不同的浏览器会以不同的方式呈现它们 - 没有交叉浏览器要求select元素应如何呈现完全。

缺点是你不知道它的外观，所以你根本不能指望完全控制它。试图像这样控制它只会导致挫败感，而且是徒劳的。我建议您将控件留在浏览器用户手中 - 请放心，它将以他们熟悉的方式呈现。如果您的选项文本太长，浏览器将以某种方式容纳它 - 它通常水平拉伸列表本身，以便人们可以阅读整个文本。你可以从中学到的教训是没有太多的文字。

如果你要求人们选择句子，或许单选按钮（select）是个更好的主意吗？

水平滚动条不适用于safari

1 个答案: