如何在 html/css 中水平滚动移动/平板电脑视图中的内容? [英] How to horizontally scroll the contents in mobile/tablet view in html/css?

问题描述

我有一个

我用于单个方框项目的 CSS 代码是:

.product-contents .product {宽度:10%；文本对齐:居中；高度:150px；填充顶部:1%；填充左:1%；右填充:1%；边框样式:实心；边框宽度:3px；边框颜色:rgb(145, 147, 150);背景颜色:白色；边框半径:10px}

问题陈述:

现在在移动视图中，我希望屏幕截图中的项目在移动/平板电脑视图中水平滚动，而项目的大小没有任何变化.为了做到这一点，我使用了以下 CSS 代码，但它似乎不起作用.

@media only screen and (max-width: 767px).product-all-contents {溢出-x:自动；空白:nowrap；}

我想知道我应该在 fiddle 中进行哪些更改，以便整个屏幕截图在移动设备/平板电脑视图中滚动.

解决方案

主要问题是项目及其父项具有动态宽度.项占 10%，其父项占 70%.

我建议在您的媒体查询中使用下一个样式.您可以根据需要调整此规则以适应不同的断点.

.product-contents .product{最小宽度:25%；最大宽度:25%；保证金:0 2%；}

我必须删除所有的 JS 和一些 HTML 才能使代码片段工作.您的代码达到了 SO 的最大值.希望这会有所帮助:>

.product-all-contents{背景色:#f0f0f0；宽度:70%；保证金:自动；}.product-contents {显示:弹性；对齐内容:间隔；对齐项目:居中；填充:1rem；}.product-contents .product {宽度:10%；文本对齐:居中；高度:150px；填充顶部:1%；填充左:1%；右填充:1%；边框样式:实心；边框宽度:3px；边框颜色:rgb(145, 147, 150);背景颜色:白色；边框半径:10px}.ipad {显示:弹性；对齐内容:间隔；对齐项目:居中；填充:1rem；}.tvs {显示:弹性；对齐内容:间隔；对齐项目:居中；填充:1rem；}.franchise-hub-text, .cloud-based-text, .business-analytics-text, .tech-support-text, .order-management-text, .employee-management-text, .white-label-text,.brand-label-text、.lead-tracking-text、.custom-invoicing-text、.goal-setting-text、.customization-tools-text、.royalty-calculator-text、.email-marketing-text{宽度:50%；}div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,div.franchisehubtv、div.cloudbasedtextipad、div.business-analytics、div.tech-support、div.employee-management、div.order-management、div.white-label {显示:弹性；左边距:15%；右边距:15%；对齐项目:居中；背景色:#f0f0f0；填充:2%；保证金底部:5%；}.product-quotes{显示:块；填充:20px 11px；宽度:90%；颜色:#3b3b3d；背景:白色；边界半径:2px；行高:1.625；字体系列:'Roboto';字体粗细:正常；"}.箭头下{宽度:0；高度:0；保证金:自动；border-left: 40px 实心透明；border-right: 40px 实心透明；边框顶部:40px 实心 #f0f0f0;}.白色的{显示:无；}@media only screen and (max-width: 767px){.product-all-contents{溢出-x:自动；}.product-contents .product{最小宽度:25%；最大宽度:25%；保证金:0 2%；}}

<头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>测试</title><link rel="stylesheet" href="sample.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript" src="script/myscript.js"></script><身体><div class="product-all-contents"><div class="product-contents"><div class="product" id="franchisehub"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" 类="aligncenter size-full wp-image-7920"><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/franchise-hub-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920"><p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;颜色:rgb(58, 59, 60);">特许经营中心</p>

<div class="product" id="cloudbasedmobile" style="background-color:#81bf44;"><img class="black" style="display:none;"src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-图像-8020"/><img class="white" style="display:inline-block;"src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/cloud-based-mobile-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020"/><p style="字体大小:15px;字体系列:'Roboto'；行高:1.2；保证金最高:27%；color:white;">基于云和移动</p>

<div class="product" id="businessanalytics"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" 类="aligncenter size-full wp-image-7949"/><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/business-analytics-white.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949"/><p style="字体大小:15px;字体系列:'Roboto'；行高:1.2；保证金最高:22%；颜色:rgb(58, 59, 60);">商业分析</p>

<div class="product" id="techsupport"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953"/><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/tech-support-white.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953"/><p style="字体大小:15px;字体系列:'Roboto';右边距:9%；行高:1.2；左边距:9%；保证金最高:22%；颜色:rgb(58, 59, 60);">技术支持</p>

<div class="product" id="订单管理"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952"/><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/order-management-white.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952"/><p style="字体大小:15px;字体系列:'Roboto'；行高:1.2；保证金最高:23%；颜色:rgb(58, 59, 60);">订单管理</p>

<div class="product" id="employeemanagement"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" 类="aligncenter size-full wp-image-7920"><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/employee-management-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920"><p style="字体大小:15px;字体系列:'Roboto'；行高:1.2；左边距:5%；保证金最高:27%；颜色:rgb(58, 59, 60);">员工管理</p>

<div class="product" id="whitelabel"><img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920"><img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/white-label-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920"><p风格=字体大小:15px；字体系列:'Roboto';行高:1.2；左边距:14%；右边距:14%；保证金最高:8%；颜色:RGB(58、59、60)；">白标</p>