android横向scrollview被挤成一坨
发布于 5 年前 作者 jietian 6860 次浏览 来自 问答
.tags {
  width: 100%;
}
 
.list-tags-link {
  display: flex;
  box-sizing:  content-box;
  min-width: 80rpx;
  padding-right: 10rpx;
  padding-left: 10rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}
 

 .list-tags-img {

  height: 40px;

  width: 40px;

  border-radius: 50%;

}

.list-tags {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  height: 60px;
}
 
.list-tags .list-tags-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
 
.list-tags .list-tags-text {
 
  color: #878787;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 22rpx;
  margin: 5px 0 0 0;
}
 
<template name="tags">
<view class="list-tags-main">
    <navigator wx:for="{{tags}}" wx:key="id" wx:for-index="index" wx:for-item="item"
               url="/pages/tags/tags?id={{item.id}}&show={{show}}&title={{item.title}}&classid={{classid}}"
               class="list-tags-link">
        <image src="{{item.image}}" class="list-tags-img circle" mode="aspectFill" />
        <text class="list-tags-text">{{item.title}}</text>
    </navigator>

</view>


我暂时的在手机上的解决方法是

给list-tags-link设置最小宽度位80。。但这完全不能解决根本问题。

这个项目之前写的，css 以及命名感觉好乱，毕竟我不是专业搞网站的 - -


上图的水平排列在电脑上是有间距的，pading生效。

1 回复
.list-tags-main {
  display: flex;
  width: 100%;
  flex-flow: row;
}
 
补上
回到顶部