Question

我想用css ul和li创建我自己的日历。我在网上看到的大多数日历使用这种方式比表更好（不知道为什么会这样）。我已经创建了日历的一些基本布局，但似乎在日历顶部对齐日期标题时遇到问题。我是css的新手所以请温柔地对待我。我知道我可以准备一个，但我喜欢边做边学边察。所以这是我的代码和jsfiddle

<div id="calendar-month">
    <ul class="title">
        <div class="days-title">
            <li>Mon</li>
            <li>Tue</li>
            <li>Wen</li>
            <li>Thu</li>
            <li>Fri</li>
            <li>Sat</li>
            <li>Sun</li>
        </div>
    </ul>
    <div class="days">
        <ul class="days-item">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <span class="day-label">1</span>
            </li>
            <li>
                <span class="day-label">2</span>
            </li>
            <li>
                <span class="day-label">3</span>                    
            </li>
            <li>
                <span class="day-label">4</span>
            </li>
            <li>
                <span class="day-label">5</span>
            </li>
            <li>
                <span class="day-label">6</span>
            </li>
            <li>
                <span class="day-label">7</span>
            </li>
            <li>
                <span class="day-label">8</span>
            </li>
            <li>
                <span class="day-label">9</span>
            </li>
            <li>
                <span class="day-label">10</span>
            </li>
            <li>
                <span class="day-label">11</span>
            </li>
            <li>
                <span class="day-label">12</span>
            </li>
            <li>
                <span class="day-label">13</span>
            </li>
            <li>
                <span class="day-label">14</span>
            </li>
            <li>
                <span class="day-label">15</span>
            </li>
            <li>
                <span class="day-label">16</span>
            </li>
            <li>
                <span class="day-label">17</span>
            </li>
            <li>
                <span class="day-label">18</span>
            </li>
            <li>
                <span class="day-label">19</span>
            </li>
            <li>
                <span class="day-label">20</span>
            </li>
            <li>
                <span class="day-label">21</span>
            </li>
            <li>
                <span class="day-label">22</span>
            </li>
            <li>
                <span class="day-label">23</span>
            </li>
            <li>
                <span class="day-label">24</span>
            </li>
            <li>
                <span class="day-label">25</span>
            </li>
            <li>
                <span class="day-label">26</span>
            </li>
            <li>
                <span class="day-label">27</span>
            </li>
            <li>
                <span class="day-label">28</span>
            </li>
            <li>
                <span class="day-label">29</span>
            </li>
            <li>
                <span class="day-label">30</span>
            </li>
            <li>
                <span class="day-label"></span>
            </li>               
        </ul>
    </div>
</div>

和css

* {
    margin:0px;
    padding: 0px;
}

#calendar-month{
    margin:auto;
    width: 600px;
    height: 480px;
    background-color:#C2CCD1
}

.title {
    margin:auto;
}

.title .days-title li{
    list-style: none;
    display: inline-block;
    padding-left:0.5em;
    padding-right:0.5em;    
}

.days{
    margin:auto;
    width:600px;
    height:475px;

}

#calendar-month .days-item li{
    list-style: none;
    display:inline-block;
    float: left;
    width:70px;
    height:86px;
    background-color:white;
    border:1px solid black;
    margin-left:4px;
    padding-left:8px;
    margin-bottom:2px;  
}

.day-label{
    float:right;
    padding-right: 7px;
    padding-top: 2px;
}

它不是正确的方式，也许你可以为我提供更好的方法来理解填充和边距或如何更正确地分组它们。不，这不是家庭作业或其他任何东西:)，一次只需要设计小步骤：）

Answer 1

这是因为您没有像.title .days-title li那样将相同的属性应用于#calendar-month .days-item li。具体而言，width，padding和margin。

将这些内容添加到.title .days-title li：

width: 70px;
margin-left: 4px;
padding-left: 8px;

的 WORKING FIDDLE 的

Answer 2

如果您的日期固定宽度为70px，为什么不添加CSS：

.days-title li{
    width:64px;
    text-align:center;
}

Fiddle

正确对齐行上的li元素

2 个答案: