布局小白求助

凡人皆侑一死 2018-03-22 09:45:47

不知道为什么我的li元素没有紧跟div，div前面有个空白实在不解，源码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简易的日历</title>

    <link href="../css.em/calendar.css" rel="stylesheet" type="text/css">

    <script>



    </script>

    <style>

        #tab {height:450px;width:380px;display: block}

        ul {margin: 0px}

        li {list-style-type: none;height:100px;width:100px;float: left;border: 1px solid black;margin: 5px;background: peru}

        h2 {text-align: center;font-family:"Times New Roman",Georgia,Serif;font-weight: bold}

        p {text-align: center;font-family: 'Symbol';font-weight: bold}

        #text {height:50px;width: 400px;display:block;font-family: Symbol}

    </style>

</head>

<body>

<div id="tab" class="calendar">

    <ul>

        <li><h2>1</h2><p>JAN</p></li>

        <li><h2>2</h2><p>FER</p></li>

        <li><h2>3</h2><p>MAR</p></li>

        <li><h2>4</h2><p>APR</p></li>

        <li><h2>5</h2><p>MAY</p></li>

        <li><h2>6</h2><p>JUN</p></li>

        <li><h2>7</h2><p>JUL</p></li>

        <li><h2>8</h2><p>AUG</p></li>

        <li><h2>9</h2><p>SEP</p></li>

        <li><h2>10</h2><p>OCT</p></li>

        <li><h2>11</h2><p>NOV</p></li>

        <li><h2>12</h2><p>DEC</p></li>

    </ul>

</div>

    <div id="text">

        <span>是时候展示真正的技术了</span>

    </div>

</body>

</html>