css - 增加 div 的宽度，忽略 container-parent 的宽度(并使用 x 滚动条)-6ren

css - 增加 div 的宽度，忽略 container-parent 的宽度(并使用 x 滚动条)

转载作者：太空宇宙更新时间：2023-11-04 04:42:28

24

4

让我用 madskillz 解释一下。

当前状态

我正在做一个由 url 数组组成的画廊。哈姆代码:

%section#content
  %form
    %fieldset
      #gallery
        %i.gallery_title Все категории
        .cat-item
          - @all.zip(@all_thumbs).each do |full, thumb|
            .cat-pic
              %a{href:"#{full}", rel:'lightbox[roadtrip]'}
                %img{src:"#{thumb}", alt:"Панно \"#{full}\""}
              %br
              %input{type:'radio', name:'picture', value:"#{full}"}

CSS (sass)

#content
  margin: auto
  margin-top: 25px
  padding-bottom: 100px
  width: 950px
  align: center
form
  display: inline-block
fieldset
  background-color: darken($bg, 10%)
  border-radius: 10px /* wtf firefox */
  @include round(10px)
.cat-item
  height: 150px
  overflow-x: scroll
  overflow-y: hidden
  background: $bg
  @include round(10px)
  min-width: auto !important
.cat-pic
  margin-left: 5px
  margin-top: 5px
  height: 120px
  float: left
  input
    width: 100px

我想把所有图片排成一行，加一个x轴滚动条。我已经厌倦了 css。希望你能帮忙。 i_want

最佳答案

这是一个 HTML 和 CSS 的工作示例，可以实现与您正在寻找的结果非常相似的结果: http://jsfiddle.net/rey6G/

<html>
<head>
  <title>Test</title>
  <style type="text/css">
    #Outer {
      border: #000000 1px solid;
      background-color: #FFFFFF;
      width: 500px;
      overflow-x: scroll;
      overflow-y: hidden;
    }
    #Inner {
      list-style: none;
      white-space: nowrap;
      margin: 0;
      padding: 0;
    }
    #Inner > li {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      border: #CCCCCC 1px solid;
      padding: 10px;
      width: 80px;
      height: 80px;
      white-space: normal;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="Outer">
    <ul id="Inner">
      <li>Something</li>
      <li>Something Else</li>
      <li>Another thing</li>
      <li>Thing 4</li>
      <li>Badda thing</li>
      <li>Wee Thing</li>
      <li>This thing</li>
      <li>That thing</li>
    </ul>
  </div>
</body>
</html>

注意这使用 display: inline-block 在非常旧的 IE 版本(我相信是 IE7 及以下)中不起作用。我怀疑这是一个问题，但我觉得我应该提出来!

关于css - 增加 div 的宽度，忽略 container-parent 的宽度(并使用 x 滚动条)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15191034/

24

4

0

文章推荐： python - 如何使用 cProfile 获得更精细的结果

文章推荐： Python boto3 按大小对 s3 对象进行排序

文章推荐： CSS:设置图片高度；纵横比；加尔-彼得斯投影

文章推荐： jquery - 不同的没有。不同屏幕分辨率下的列数

select - 增加 FD_SETSIZE
我需要从 1024 增加 FD_SETSIZE 值至 4096 .我知道最好使用 poll()/epoll()但我想了解什么是优点/缺点。主要问题是:我要重新编译glibc吗？ ?我读了几个线程，其中
无法理解C中减少/增加 'for'的逻辑
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
javascript - 增加/减少屏幕上的值的按钮
我在 HTML 文件中有这样的内容: var value = 0; add(x){ x++; do
javascript - 增加/减少滚动变量
有没有办法在用户向上滚动时增加变量，并在用户使用 JavaScript 向下滚动时减少变量？变量没有最大值或最小值，如果能够调整灵敏度就好了。我不知道从哪里开始，感谢您的帮助! 编辑:没有滚动条，因为
ios 增加/减少tableview的大小
我是 ios 新手，遇到以下问题。我想根据表格 View 中元素的数量增加和减少表格 View 的高度大小。如果在输入时客户端在输出时给出 3 个或超过 3 个元素，我希望看到一个比默认行大 2 行
ios - 增加 NSIndexPath
所以我一直在四处搜索，似乎大多数人认为以下列方式递增 indexPath 是正确的方法: NSIndexPath *newIndexPath = [NSIndexPath indexPathForRo
ios - 增加 connSupervisionTimeout
我有一个关于 connSupervisionTimeout 的问题。我正在使用 CoreBluetooth 编写应用程序。我检查了连接参数和 connSupervisionTimeout = 720
javascript - 增加/减少滚动上的元素填充
我正在尝试根据页面的滚动位置更改元素的填充；当用户向下滚动页面时，填充会增加，而当他们向上滚动时，填充会减少。我的主要问题是滚动不是很流畅，有时如果我滚动到页面顶部太快，每次元素的填充大小都不一样。
增加 C 中自动数组的大小后出现编译器错误
我正在尝试计算 18456 个基因的相关性度量，但编译器 (Dev C) 在将宏 GENE 或 INDEX 增加到 4000 到 5000 之间的值后退出或大。例如，它适用于: # define GE
html - 增加:absolute位置的宽高
我有一个带有 position: absolute 和 CSS3 过渡的圆形元素(a 元素)。在 hover 事件中，我想增加圆的高度和宽度，但我想在所有边上添加像素，而不仅仅是在左侧或右侧。示例如
javascript - 增加/减少页面上所有元素字体大小的有效方法
为了改善用户体验，我计划在我网站的所有页面(A-、A、A+)上增加/减少/重置字体大小我面临的问题是页面上不同元素使用的字体大小不统一。有些是 14px，有些是 18px，有些是 12px，有些是
Yii框架数据库查询、增加、删除操作示例
本文实例讲述了Yii框架数据库查询、增加、删除操作。分享给大家供大家参考，具体如下： Yii 数据库查询模型代码： ?
使用SQL批量替换语句修改、增加、删除字段内容
sql替换语句，用该命令可以整批替换某字段的内容，也可以批量在原字段内容上加上或去掉字符。命令总解：update 表的名称 set 此表要替换的字段名=REPLACE(此表要替换的字段名, '原
sql不常用函数总结以及事务，增加，删除触发器
sql不常用函数总结以及事务，增加，删除触发器 distinct 删除重复行 declare @x 申明一个变量 convert(varchar(20),t
scala - 增加 Spark 的可用内存
要增加我使用的最大可用内存: export SPARK_MEM=1 g 或者我可以使用 val conf = new SparkConf() .setMaster("loca
flutter - 增加 AppBar 前导属性的宽度
我正在尝试将文本(自定义文本按钮)放入 AppBar 的前导属性中。但是，当文本太长时，文本会变成多行 Scaffold( appBar: AppBar( centerTi
netbeans - 增加 NetBeans 中输出和菜单的字体大小
我正在使用最新版本的 NetBeans，我需要增加输出和菜单的字体大小(不是代码部分)。我试过: netbeans_default_options=".... --fontsize 16" 但是当我将
height - 增加 gnuplot 输出的宽度和高度
我必须将 180000 个点绘制到一个 EPS 文件中。使用标准 gnuplot 输出尺寸点彼此太接近，这使得它们无法区分。有没有办法增加图像的宽度和高度？最佳答案是的。 set termina
html - 增加 Bootstrap 导航栏输入字段宽度
我有一个带有输入字段的 twitter bootstrap 3 导航栏。我想增加输入字段的宽度。我已尝试设置 col 大小，但它不起作用。 html比较长，请引用bootply http://www.
r - 增加 ggplot 标题中的下划线大小
我正在尝试增加 ggplot 标题中下划线的大小/宽度/厚度。我曾尝试使用大小、宽度和长度，但没有成功。这是我所做的一个例子。 test <- tibble(x = 1:5, y = 1, z =

首页

博学

6Ren·AI

商城

css - 增加 div 的宽度，忽略 container-parent 的宽度(并使用 x 滚动条)