html - 水平滚动条 - 面板内无法容纳信息？-6ren

html - 水平滚动条 - 面板内无法容纳信息？

转载作者：可可西里更新时间：2023-11-01 14:59:49

我正在使用水平滚动条的代码

我想要的是能够在底部添加一个面板/文本，并在每个面板的右上角添加一个按钮。但我不知道如何让它适合。

当前滚动条的外观: how scroller look at the moment

我希望面板看起来像什么: how I would like the panel to look like

下面的代码

------

<!DOCTYPE HTML>
<html lang="en-US">
<head> 
    <meta charset="UTF-8">
    <meta name="description" content="Slider Template">
    <meta name="keywords" content="HTML,CSS,JavaScript"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <title>Template</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><a name="top"></a>

    <script>
$(document).ready(function(){

   $('#content').load("search-tab.html");

});
</script>


    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script>
$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {
var status = $('.home').attr('class');
if(status === "home") {
$('#layer_1').show();
$('.home').addClass('display_none');
}
if(status === "home display_none") {
$('#layer_1 , #layer_2 , #layer_3').hide();
$('.home').removeClass('display_none');
}
}); 
$('.show_layer_1').click(function() {
$('.close_all').hide();
$('#layer_1').show();
});
$('.show_layer_2').click(function() {
$('.close_all').hide();
$('#layer_2').show();

});
});
</script


><style>
:root {
  --gutter: 20px;
}

.app {
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
    grid-column: 1 / -1;
}

.hs {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 10px;
    grid-template-rows: minmax(50px, 1fr);
    grid-auto-flow: column;
  grid-auto-columns: calc(20% - var(--gutter) * 2);
    overflow-x: scroll;
    scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
    width: 1201px;
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

.app {
    width: 1200px;
    height: 234px;
    /* [disabled]background-color: #DBD0BC; */
    overflow-y: scroll;
}
.event-title {
    font-size: 36px;
    margin-bottom: -25px;
    margin-top: -16px;
    padding-top: 11px;
    padding-left: 0px;
    font-weight: 400;
    font-style: italic;
}

.hs > li,
.item {
    scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
    display: table;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #CBCBCB;
    border-radius: 8px;
    max-width: 1px;
    background-image: url(../images/3.jpg);
}
.bottom-panel {
    background-color: #FF0004;
    width: 170px;
    height: 42px;
    margin-top: 74px;
}
.top-button {
    background-color: #FB3437;
    width: 29px;
    height: 24px;
    margin-left: 139px;
    margin-top: 4px;
}
.item {
    width: 220px;
    min-width: 174px;
    height: 145px;
    margin-left: 1px;
}
.grey-panel {
    background-color: #000000;
    width: 169px;
    height: 54px;
    margin-left: 0px;
    margin-top: 82px;
    padding-top: var(;
    padding-bottom: --gutter;
    padding-right: --gutter;
}
.side-search-strip {
}
</style>




></head>

<body>
<div></div>

    <div class="nav-menu-bar font">
<div class="nav-menu-bar-centre-panel"><div class="scrollable-nav-container">
<div>
  <div><div class="scrollable-nav-container">
<div class="arrow-left"></div>

<div class="scrollable-nav-inner">
<nav class="scrollable-nav">
<ul>
<!-- Start main-nav -->
<nav class="main-nav"> </nav>
<!-- end main-nav --></div>
</div>
<div class="container">

</div>
</div>
      <section class="content_wrapper">

<div class="home"> </div>
<!-- home -->

<div id="layer_1" class="close_all">
<div class="layer_1_content"> </div>
</div>
<!-- layer_1 --></main>
</div></main>
</div></div>



    <!-- Carousel -->

<div class="main-container background-fade">
  <div class="menu-strip"><div class="float-right"></div>
<div class="test clear-the-float main-area"> </div></div>
 <div>
<div class="app">
  <h1 class="event-title font">Event title...</h1>
  <ul class="hs full">
       <li class="item">
         <div class="top-button"></div>
         <div class="bottom-panel">
<p>text1</p>
         </div>
       </li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
     </ul>
 </div>
 </div>
</div>
<script src="js/modernizr-3.5.0.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/owl.carousel.min.js"></script> 

<script>
    <!-- scroll menu bar script --> 
$(document).ready(function(){
$( ".scrollable-nav" ).draggable({ axis: 'x' });
});
    <!-- end menu scroll top bar script --> 




</body>
</html>

------

希望能帮到你

谢谢

蒂姆

最佳答案

你需要下面的css

li.item {
    position: relative;
    overflow: hidden;
}

.item .bottom-panel {
    bottom: 0;
    position: absolute;
    width: 100%;
    left: 0;
    margin:0;
    height: auto;
}

.item .bottom-panel p {
    margin: 0;
    padding: 7px 10px;
}

.top-button {
    margin: 0;
    position: absolute;
    right: 14px;
    border-radius: 6px;
}

查看演示 here

关于html - 水平滚动条 - 面板内无法容纳信息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53849293/

文章推荐： c++ - 使用 gdb 7.0 打印 STL 容器

文章推荐： java - Hadoop java mapper -copyFromLocal 堆大小错误

文章推荐： hadoop - 控制要写入输出文件的行数

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 水平滚动条 - 面板内无法容纳信息？

------

------