html - 如何获得这种水平滚动?

标签 html css

如何实现局部水平滚动? 正如 fiddle 中给出的那样,滚动条已满 100%,因此我看不到最后几个元素。 我有一个设置宽度的输入框,必须像给定的那样定位。但我希望滚动条在输入框之前结束。 https://jsfiddle.net/77ubr2ht/

html 的格式是这样的-

<ul>
<li></li>....<li></li>
<input type="text">
</ul>

最佳答案

我对它做了一些修改。

https://jsfiddle.net/77ubr2ht/1/

当您在输入字段中使用 position: fixed 时,您有效地从正常页面流中删除了该元素,因此其他元素无法与其交互。我还将滚动区域的宽度设置为 max-width: 100%。您有一个硬编码宽度,可以防止该元素扩展到页面长度。

关于html - 如何获得这种水平滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33690895/

相关文章:

html - 完全响应式进度条

javascript - Excel 到 JSON javascript 代码?

java - 创建具有下载属性的 GWT Anchor 元素

html - 下拉菜单间距的联系表格 7 问题

javascript - d3 - 带圆圈的正弦波,问题是圆圈在曲线中重叠

html - 如何使这些按钮不显示为蓝色链接

javascript - 使用 jquery/javascript 进行复选框更改在引导模式内不起作用

javascript - 滚动时创建一个不断变化的 css 导航栏?

jQuery UI-Slider 没有 'live' 效果和 CSS 样式

css - 使绝对定位的 child 不会超出视口(viewport)边界