html - HTML 列表框(不是容器)上的水平滚动？

coder 2023-08-09 原文

我有一个包含很多元素的列表框，其中一些有很长的标签。因此，我需要水平和垂直滚动。

我尝试将列表框放在一个 div 中并对两者应用溢出样式，但这有问题。 div 上的水平滚动滚动列表框本身，而不是内容。例如，当我滚动时，我最终看到列表框的边缘及其滚动条。这就提出了第二个问题；我需要水平滚动才能到达列表框的垂直滚动条，因为 div 的垂直滚动条(如果存在)会平移整个列表框，而不是其内容。

要了解我在说什么，try this jsFiddle in FireFox or IE (Chrome 运行良好)。

代码如下:

div {
  height: 100px;
  width: 300px;
  overflow: auto;
}
select {
  height: 200px;
  overflow: visible;
}

<div>
  <select multiple>
    <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
  </select>
</div>

有没有办法让列表框上的水平和垂直滚动条作用于列表框内容，并且在 Chrome、IE(不用担心旧版本)、FireFox 和 Safari 中有效？

最佳答案

首先设置size attribute选择的数量以匹配选项的数量。然后您可以添加另一个 div 并使用它或多或少地裁剪掉未使用的滚动条。

Working Example

.wrap {
  height: 100px;
  width: 300px;
  overflow: auto;
}
.crop {
  overflow: hidden;
  display: inline-block;
}
select {
  border: none;
  margin: 0px -20px 0px 0px; /* hide unused scroll bar */
}

<div class="wrap">
  <div class="crop"><!-- add a croping container -->
    <select multiple size="21"><!--add size attribute equal to the length of list-->
      <option>1 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>2 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>3 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>4 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>5 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>6 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>7 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>8 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>9 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>10 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>11 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>12 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>13 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>14 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>15 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>16 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>17 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>18 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>19 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>20 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
      <option>21 Vsdjflksdj fkajsdk fasjd;fkl sdaj;fk asdjf asdkljf klsdaj;f lsdajfk l;sdjkflsdjf kasd;fjl THE END</option>
    </select>
  </div>
</div>

关于html - HTML 列表框(不是容器)上的水平滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31927524/

容器 html option Vsdjflksdj sdjkflsdjf css

有关html - HTML 列表框(不是容器)上的水平滚动？的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - RVM 使用列表[0] - 2
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。最佳答案这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - openshift 上的 rails 控制台 - 2
我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新rubygems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems
ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2
HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

html - HTML 列表框(不是容器)上的水平滚动？

有关html - HTML 列表框(不是容器)上的水平滚动？的更多相关文章

随机推荐