You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CSS日历布局问题：如何让日期块宽度匹配头部宽度？

avatar
架构老林
2026-8-12
如何让日历日期区块宽度匹配头部并实现规整布局？

我正在学习CSS，想要编写一个小型日历，尝试模板后写出了如下代码，但目前无法让days区块的宽度匹配头部，只能靠百分比勉强调整周布局，请问该怎么正确实现？期望的样式是头部与日期区宽度完全一致，日期按7列整齐排列，支持当前日期高亮、过期日期灰化的效果。

现有代码

CSS代码 

ul {list-style-type: none;}

.header {
  color: white;
  width: 320px;
  height: 40px;
  background: #1abc9c;
  text-align: center;
}

.header ul {
  margin: 0;
  padding: 0;
}

.header ul li {
  padding-top: 7px;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}

/* Month header */
.month {
  width: 320px;
  height: 40px;
  background: black;
  text-align: center;
}

/* Month list */
.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  padding-top: 7px;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
  color: #1abc9c;
  float: left;
  padding-top: 5px;
}

/* Next button */
.month .next {
  color: #1abc9c;
  float: right;
  padding-top: 5px;
}

/* Days (1-31) */
.days {
  padding: 10px 10px;
  background: white;
  margin: 0;
}

.days li {
  margin: px; /* 此处存在语法错误，值为空 */
  list-style-type: none;
  display: inline-block;
  width: 13.5%;
  text-align: left;
  margin-bottom: 5px;
  font-size: 12px;
  color: black;
  font-weight: bold;
}

/* Highlight the "current" day */
.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}

.days li .left {
  padding: 5px;
  color: gray !important
}

HTML代码 

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Sample</title>
</head>
<div class="header">
  <ul>
    <li>Archive<span style="font-size:18px"></span></li>
  </ul>
</div>

<div class="month">
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>December 2022</li>
  </ul>
</div>

<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li><span class="active">4</span></li>
  <li><span class="left">5</span></li>
  <li><span class="left">6</span></li>
  <li><span class="left">7</span></li>
  <li><span class="left">8</span></li>
  <li><span class="left">9</span></li>
  <li><span class="left">10</span></li>
  <li><span class="left">11</span></li>
  <li><span class="left">12</span></li>
  <li><span class="left">13</span></li>
  <li><span class="left">14</span></li>
  <li><span class="left">15</span></li>
  <li><span class="left">16</span></li>
  <li><span class="left">17</span></li>
  <li><span class="left">18</span></li>
  <li><span class="left">19</span></li>
  <li><span class="left">20</span></li>
  <li><span class="left">21</span></li>
  <li><span class="left">22</span></li>
  <li><span class="left">23</span></li>
  <li><span class="left">24</span></li>
  <li><span class="left">25</span></li>
  <li><span class="left">26</span></li>
  <li><span class="left">27</span></li>
  <li><span class="left">28</span></li>
  <li><span class="left">29</span></li>
  <li><span class="left">30</span></li>
  <li><span class="left">31</span></li>
</ul>

解决方案

核心调整思路

  1. 统一容器宽度：给整个日历加外层容器，固定宽度320px，让内部所有区块继承该宽度，避免重复设置，同时确保days与头部宽度完全匹配。
  2. Flex布局实现7列均分：将days设为flex容器，开启自动换行，每个日期li设置flex:1和最小宽度calc(100%/7)，实现完美7列均分，无需手动调整百分比。
  3. 修复样式细节：移除无效语法，调整日期单元格的内边距、文本对齐方式，优化视觉规整度。

修改后的完整代码

CSS代码

/* 外层容器，统一控制宽度 */
.calendar-container {
  width: 320px;
}

ul {list-style-type: none;}

.header {
  color: white;
  height: 40px;
  background: #1abc9c;
  text-align: center;
}

.header ul {
  margin: 0;
  padding: 0;
}

.header ul li {
  padding-top: 7px;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}

/* Month header */
.month {
  height: 40px;
  background: black;
  text-align: center;
}

/* Month list */
.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  padding-top: 7px;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
  color: #1abc9c;
  float: left;
  padding-top: 5px;
}

/* Next button */
.month .next {
  color: #1abc9c;
  float: right;
  padding-top: 5px;
}

/* Days (1-31) */
.days {
  padding: 10px 0;
  background: white;
  margin: 0;
  display: flex; /* 启用Flex布局 */
  flex-wrap: wrap; /* 自动换行 */
  gap: 5px 0; /* 行间距 */
}

.days li {
  flex: 1; /* 均分剩余空间 */
  min-width: calc(100% / 7); /* 确保每列占1/7宽度 */
  text-align: center; /* 文本居中，符合日历视觉习惯 */
  font-size: 12px;
  color: black;
  font-weight: bold;
  padding: 5px 0;
}

/* Highlight the "current" day */
.days li .active {
  padding: 5px 8px;
  background: #1abc9c;
  color: white !important;
  border-radius: 50%; /* 可选：圆形高亮效果 */
}

.days li .left {
  padding: 5px 8px;
  color: gray !important;
}

HTML代码

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Sample</title>
</head>
<!-- 新增外层容器，统一控制宽度 -->
<div class="calendar-container">
  <div class="header">
    <ul>
      <li>Archive<span style="font-size:18px"></span></li>
    </ul>
  </div>

  <div class="month">
    <ul>
      <li class="prev">&#10094;</li>
      <li class="next">&#10095;</li>
      <li>December 2022</li>
    </ul>
  </div>

  <ul class="days">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li><span class="active">4</span></li>
    <li><span class="left">5</span></li>
    <li><span class="left">6</span></li>
    <li><span class="left">7</span></li>
    <li><span class="left">8</span></li>
    <li><span class="left">9</span></li>
    <li><span class="left">10</span></li>
    <li><span class="left">11</span></li>
    <li><span class="left">12</span></li>
    <li><span class="left">13</span></li>
    <li><span class="left">14</span></li>
    <li><span class="left">15</span></li>
    <li><span class="left">16</span></li>
    <li><span class="left">17</span></li>
    <li><span class="left">18</span></li>
    <li><span class="left">19</span></li>
    <li><span class="left">20</span></li>
    <li><span class="left">21</span></li>
    <li><span class="left">22</span></li>
    <li><span class="left">23</span></li>
    <li><span class="left">24</span></li>
    <li><span class="left">25</span></li>
    <li><span class="left">26</span></li>
    <li><span class="left">27</span></li>
    <li><span class="left">28</span></li>
    <li><span class="left">29</span></li>
    <li><span class="left">30</span></li>
    <li><span class="left">31</span></li>
  </ul>
</div>

效果说明

  • 外层容器calendar-container固定宽度320px，内部所有区块自动匹配该宽度，彻底解决days与头部宽度不一致的问题。
  • Flex布局让日期自动按7列均分，无需手动调整百分比，布局更稳定且适配性更强。
  • 调整了日期文本居中、内边距等细节，视觉效果更接近规整的日历样式。

内容的提问来源于stack exchange，提问作者Michael

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.12 10:05:22