<view class="cities row-item flexbox" v-for="(item,index) in hotcities" :key="index"> <text class="hotcitiesitem" style="flex: 1;">{{item.names}}</text> .cities { display: flex; } .hotcitiesitem { width: 23%; border: 1px solid #ccc; border-radius: 20rpx; }将他的样式设置为每行显示四个text每个text都要有边框 </view>
时间: 2023-07-19 18:14:34 浏览: 41
好的,您可以将 CSS 样式设置为以下内容来实现您的要求:
```
.cities {
display: flex;
flex-wrap: wrap;
}
.hotcitiesitem {
width: 23%;
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20rpx;
text-align: center;
}
```
这样,每行将会显示四个 `<text>` 元素,并且每个元素都将会有一个灰色的边框和圆角。
相关问题
<view class="cities row-item flexbox" v-for="(item,index) in hotcities" :key="index"> <text class="hotcitiesitem" style="flex: 1;">{{item.names}}</text> </view>将他的样式设置为每行显示四个,每个显示的内容需要边框
您可以将 CSS 样式设置为以下内容,来实现您的要求:
```
.cities {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.hotcitiesitem {
flex: 1 0 calc(25% - 10px);
margin: 5px;
border: 1px solid black;
text-align: center;
}
```
这样,每行将会显示四个元素,并且每个元素都将会有一个黑色的边框。
<view class="rega" v-if="isActive==1"> <text style="margin: 10px;">热门城市</text> <block class="cities row-item" v-for="(item,index) in hotcities" key="index"> <view class="hotcities—item"> <text>{{item.names}}</text> </view> </block> </view>让这个block里面显示的内容横向排列,每行显示4个,显示的每个元素都要有边框
可以将这个block的class属性改为"cities row-item flexbox",并在CSS样式中添加以下代码:
```
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.hotcities—item {
width: 23%;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px;
}
```
这样就可以让block里面的内容横向排列,每行显示4个,并且每个元素都有边框了。