1

我想使用 css ul's 和 li's 创建自己的日历。我在网上看到的大多数日历都比表格更好地使用这种方式（不知道为什么会这样）。我已经创建了一些基本的日历布局，但在日历顶部对齐日期标题时似乎存在问题。我是 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;
}

这可能不是正确的方法，也许您可​​以为我提供更好的方法来理解填充和边距或如何更正确地对它们进行分组。不，这不是家庭作业或其他任何事情:)，一次只是让 inot 设计一小步 :)

4

2 回答 2

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;

工作小提琴

于 2013-11-13T10:51:01.773 回答
0

如果您的日子固定宽度为 70 像素，为什么不添加 CSS：

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

小提琴

于 2013-11-13T10:49:56.427 回答