1

これらは私のdivのcssコードです。最初にスロットヘッドクラスのdivを作成し、水平方向にいくつかのスロットを作成しています。

div.slotshead{
    z-index:3;
    position:relative;
    border: 1px solid #5f92d2;
    width: 130px;
    height: 50px;
    color: #003366;
    font-size:15px;
    text-align:center;
    font-family:'arial';
}

div.slots{
    z-index:3;
    position:relative;
    border: 1px solid #d0d0fe;
    width: 45px;
    height: 50px;
    color: #003366;
    font-size:10px;
    text-align:center;
    font-family:'arial';
}

これはそれらのコードです

echo '<h3>';
for ($i = 0; $i < 31; $i++) {
    echo "<div class=slotshead id=$i>";
    If($i==0){
        echo 'TIME';
    }
    echo "</div>";

    for ($j=0;$j < 23;$j++) {
        echo " <div class=slots>";
        If(($i==0)){
            $start = strtotime('8am');
            $k++;
            $tod = $start + ($k * 15 * 60);
            echo date('H:i A', $tod);
        }
        echo "</div>";
    }

    echo '<br>';

}
echo '</h3>';

これがjsfiddleの例です

ここで、スロットは正常に動作しますが、slothead(div with 'TIME') が少し下に移動します。なぜですか? 参考までに、試してみましたが、役に立ちvertical-align=top;ませんでした...

4

1 に答える 1

1

わかりました、これがあなたが求めていることだと思います

CSSで追加

h3{margin:0;padding:0;}

例

デモ

それでも平均を減らしたい場合は、以下を参照してください

html,body,h3{margin:0;padding:0}

デモ

于 2013-03-16T05:13:57.417 に答える