Html 无法使用ion scroll水平滚动

我使用以下命令创建了一个项目：

$ ionic start myApp sidemenu

我已经实现了离子列表上方的水平滚动

下面是我的标记

<ion-scroll direction="x" class="full-width"> 
  <div class="row" >
    <div class="col horizontal-item-margin horizontal-item-padding" ng-repeat="scheduleShowObj in scheduleObjectsList"> 
     <a href="#/app/playlists/{{scheduleShowObj.nid}}">
      <div class="full-width">{{scheduleShowObj.PgmItemDateTime * 1000 | date:'HH:mm a'}}</div>
      <img src={{scheduleShowObj.Thumburl}} class="imgresize"/>
      <div class="full-width">{{scheduleShowObj.PgmTitle}}</div> 
     </a>    
    </div>
  </div> 
</ion-scroll>

我面临的问题是：

1.）我无法水平滚动

---

2.）由于填充和边距，img标记上方和下方div中的文本字符垂直显示。

这里有两个示例显示了直接的html/css，然后将其应用于ionic

第一个黄铜钉HTML/CSS 这是一个非常基本的水平滚动的代码笔，仅使用PlanHTML/css

HTML

其基本思想是： -创建具有某些尺寸的图元。宽度必须小于放置在其内部的图元。这个溢出的内部元素允许一个可滚动区域以及css溢出：scroll及其变体

• 在第一个元素内创建另一个元素，并使其宽度大于其父元素

• 应用溢出：滚动到外部元素。外部元素的内容比它能容纳的内容大。因此，处理溢出的一种方法是在需要的方向上创建一个滚动条，在本例中为水平滚动条

第二，将此应用于

一切都是一样的，除了一些预先打包的东西：看看这个代码笔

HTML

• 与简单示例中的容器相关。唯一的区别是方向属性。既然我们知道要滚动，

  overflow:scroll

  是给定的，我们只需要指定方向。x、 y或xy。有关所有其他选项，请参见文档
• 内容与之前相同，再次进行了一次优化。由于content

  div

  中的内容可能是可变的，因此我们可以将

  max content

  应用于content div的width属性，该属性为我们计算总宽度。还有其他方法可以做到这一点

• div

  上内容中的重复项，因此无需指定

  display:block

  ，因为divs默认为该项。因此，所需要的就是应用

  float:left

  来并排获取项目

• 确实发挥了作用，因为您的初始宽度将是给定屏幕的大小<代码>继承该宽度

---

你能提供一个JSFIDLE，让我能看到它以你的方式工作（或不工作）吗？@Brendan你能帮我制作小提琴吗？因为我是新手，我在项目中有控制器文件、工厂文件、css和html文件，如何制作小提琴请告诉我。嗨。你能帮我打个电话吗。我有标签内的内容。但我根本无法向下滚动。如何解决这个问题？

.horizontal-item-margin {
margin-left: 3%;
margin-right: 3%;
}

.horizontal-item-padding {
padding-left: 3%;
padding-right: 3%;
}

.imgresize{
width: 150px; 
height: auto;
}

.full-width{
width: 100%;
padding: 0px;
}

<div id="container">
   <div id="content">
      <div id="1" class="box">stuff</div>
      <div id="2" class="box">more</div>
      <div id="3" class="box">to</div>
      <div id="4" class="box">Find</div>
      <div id="5" class="box">Here</div>
   </div>
</div>

#container{
  overflow-x:scroll;
  height: 80px; 
  width:400px;
}
#content{
   overflow-x:scroll; /* when content is wider than container scrolling will occur on the x axis */
   width:1200px; /* this creates the overflow area in the container */
}
.item{
   /*option a: create block elements and float them left*/
   display:block;  float:left;

   /*option b: use inline elements (or force inline elements)*/
   display: inline;
}

<ion-content id="container">
   <ion-scroll id="ionScrollRegion" direction="x">
      <div id="overflowingContent">
         <div class="item" ng-repeat="item in items">{{item.data}}</div>
      </div>
   </ion-scroll>
</ion-content>

#overflowingContent{
  width: -webkit-max-content;
  width: max-content;
}

.item{
  display:block;
  float:left;
}