1

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;
}

それは正しい方法ではないかもしれません。おそらく、パディングとマージンを理解するためのより良い方法、またはそれらをより適切にグループ化する方法を教えてください。いいえ、それは宿題でも何でもありません:)、一度に設計の小さなステップを取得するだけです:)

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 に答える