18910140161

HTML-如何使每个callendar项目均匀增长?-堆栈溢出

顺晟科技

2022-10-19 12:33:36

180

我有以下Callendar的实现:

但是在小屏幕(360x640)中,列似乎没有顺序:

我如何使它在小屏幕尺寸下也均匀间隔? 我想要的是一个表格外观,增长,缩小,均匀,无颜色的屏幕大小。 你知道我怎么做到这一点吗?


顺晟科技:

需要在.btn类中重置填充。添加到这些类和。

CSS

以下代码添加到CSS

.btn-etable {
  color: #fff;
  background-color: #d92b3a;
  border-color: #d92b3a;
}

.btn-etable:hover,
.btn-etable.selected {
  color: #d92b3a;
  background-color: #fff;
  border-color: #d92b3a;
}

.btn-ppl {
  width: 48px;
  height: 48px;
  margin: 2px;
}

.callendar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}

.week,
.callendar_header {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: stretch;
}

.callendar_header {
  order: "-1"
}

.callendar_header span {
  width: 48px;
  margin: 1px;
  text-align: center;
  flex-grow: 1;
}

.callendar-item,
.blank {
  width: 48px;
  flex-grow: 1;
  margin: 1px;
}

解决

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航