怎么修改样式使得时间和去评价去退款在同一排上且spacebetween去退款右边不要留有空隙
时间: 2024-12-25 13:31:51 浏览: 18
为了使时间和“去评价”、“去退款”按钮在同一条线上并使用 `space-between` 布局,同时确保右侧不留空隙,可以进行以下 CSS 修改:
### 1. 修改 `.time` 和 `.pay` 样式
将 `.time` 和 `.pay` 的样式进行调整,使其能够适应一行显示并确保没有多余的空间。
```css
.wrapper .OrderingInformation .time {
display: flex;
justify-content: space-between;
align-items: center;
border: 1vw solid rgb(240, 240, 240);
flex-direction: row;
padding: 4vw;
color: #666;
font-size: 3.8vw;
border-bottom-left-radius: 3vw;
border-bottom-right-radius: 3vw;
}
.wrapper .OrderingInformation .time .pay {
display: flex;
align-items: center;
margin-left: auto; /* 将 pay 内容推到最右边 */
}
```
### 2. 修改按钮容器的样式
确保按钮容器没有多余的间距,并且按钮之间有适当的间隙。
```css
.wrapper .OrderingInformation .time .pay .buttons {
display: flex;
margin-left: 0; /* 移除左侧的空白 */
gap: 2vw; /* 调整按钮之间的间隔 */
}
```
### 完整的 CSS 修改示例
```css
<style scoped>
.wrapper .wrapper .OrderingInformation .time {
display: flex;
justify-content: space-between;
align-items: center;
border: 1vw solid rgb(240, 240, 240);
flex-direction: row;
padding: 4vw;
color: #666;
font-size: 3.8vw;
border-bottom-left-radius: 3vw;
border-bottom-right-radius: 3vw;
}
.wrapper .OrderingInformation .time .pay {
display: flex;
align-items: center;
margin-left: auto; /* 将 pay 内容推到最右边 */
}
.wrapper .OrderingInformation .time .pay .buttons {
display: flex;
margin-left: 0; /* 移除左侧的空白 */
gap: 2vw; /* 调整按钮之间的间隔 */
}
/* 其他原有样式保持不变 */
.wrapper { width: 100%; }
.wrapper header { width: 100%; height: 15vw; background-color: #21D4FD; background-image: linear-gradient(270deg, #21D4FD 0%, #B721FF 100%); display: flex; justify-content: space-between; align-items: center; }
.wrapper header i { color: #caedf7; font-size: 5vw; padding-left: 5vw; }
.wrapper header span { margin-left: 40vw; align-items: center; font-size: 4.5vw; color: #caedf7; font-weight: 500; padding-right: 5vw; }
/* ... 其他样式省略 ... */
</style>
```
### 解释
1. **`.time`**: 设置为 `flex` 并使用 `justify-content: space-between` 来确保交易金额和按钮分列两侧。
2. **`.pay`**: 使用 `align-items: center` 和 `margin-left: auto` 将其内容推到最右边。
3. **`.buttons`**: 移除左侧的空白并调整按钮间的间距。
这样修改后,时间和“去评价”、“去退款”按钮将在同一行内显示,并且右侧不会有多余的空间。
阅读全文
相关推荐














