首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

问个CSS布局的有关问题

2012-05-02 
问个CSS布局的问题。我照着书上敲的代码,这是我的页面的显示样式:不知道知道怎么回事,两行之间总有空隙。我

问个CSS布局的问题。
我照着书上敲的代码,这是我的页面的显示样式:


不知道知道怎么回事,两行之间总有空隙。我希望两行之间不要有那个空隙。请问,该怎么改?

HTML code
<!DOCTYPE html><html><head><meta http-equv="Content-Type" content="text/html;charset=UTF-8" /><title>Events Calendar</title><link rel="stylesheet" type="text/css" media="screen,projection" href="css/style.css" /></head><body><div id="content">  <h2>January 2010</h2>  <ul class="weekdays">    <li>Sun</li>    <li>Mon</li>    <li>Tue</li>    <li>Wed</li>    <li>Thu</li>    <li>Fri</li>    <li>Sat</li>  </ul>  <ul>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class=""><strong>01</strong><a href="view.php?event_id=1">New Year&#039s Day</a></li>    <li class=""><strong>02</strong></li>  </ul>  <ul>    <li class=""><strong>03</strong></li>    <li class=""><strong>04</strong></li>    <li class=""><strong>05</strong></li>    <li class=""><strong>06</strong></li>    <li class=""><strong>07</strong></li>    <li class=""><strong>08</strong></li>    <li class=""><strong>09</strong></li>  </ul>  <ul>    <li class=""><strong>10</strong></li>    <li class=""><strong>11</strong></li>    <li class=""><strong>12</strong></li>    <li class=""><strong>13</strong></li>    <li class=""><strong>14</strong></li>    <li class=""><strong>15</strong></li>    <li class=""><strong>16</strong></li>  </ul>  <ul>    <li class=""><strong>17</strong></li>    <li class=""><strong>18</strong></li>    <li class=""><strong>19</strong></li>    <li class=""><strong>20</strong></li>    <li class=""><strong>21</strong></li>    <li class=""><strong>22</strong></li>    <li class=""><strong>23</strong></li>  </ul>  <ul>    <li class=""><strong>24</strong></li>    <li class=""><strong>25</strong></li>    <li class=""><strong>26</strong></li>    <li class=""><strong>27</strong></li>    <li class=""><strong>28</strong></li>    <li class=""><strong>29</strong></li>    <li class=""><strong>30</strong></li>  </ul>  <ul>    <li class=""><strong>31</strong><a href="view.php?event_id=2">Last Day of January</a></li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>    <li class="fill">&nbsp;</li>  </ul></div><!-- end #content --></body></html> 



CSS code
body {    background-color: #789;    font-family: georgia, serif;    font-size: 13px;}#content {    display: block;    width: 821px;    margin: 40px auto 10px;    padding: 10px;    background-color: #FFF;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    border-radius: 6px;    -moz-box-shadow: 0 0 14px #123;    -webkit-box-shadow: 0 0 14px #123;    box-shadow: 0 0 14px #123;}h2, p {    margin: 0 auto 14px;    text-align: center;}ul {    display: block;    clear: left;    height: 82px;    width: 812px;    padding: 0;    list-style: none;    background-color: #FFF;    text-align: center;    border: 1px solid black;    border-top: 0;    border-bottom: 2px solid black;}li {    position: relative;    float: left;    margin: 0;    padding: 20px 2px 2px;    border-left: 1px solid black;    border-right: 1px solid black;    width: 110px;    height: 60px;    overflow: hidden;    background-color: white;}li:hover {    background-color: #FCB;    z-index: 1;    -moz-box-shadow: 0 0 10px #789;    -webkit-box-shadow: 0 0 10px #789;    box-shadow: 0 0 10px #789;}.weekdays {    height: 20px;    border-top: 2px solid black;}.weekdays li {    height: 16px;    padding: 2px;    background-color: #BCF;}.fill {    background-color: #BCD;}.weekdays li:hover, li.fill:hover {    background-color: #BCF;}li strong {    position: absolute;    top: 2px;    right: 2px;}li a {    position: relative;    display: block;    border: 1px dotted black;    margin: 2px;    padding: 2px;    font-size: 11px;    background-color: #DEF;    text-align: left;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    border-radius: 6px;    z-index: 1;    text-decoration: none;    color: black;    font-weight: bold;    font-style: italic;}li a:hover {    background-color: #BCF;    z-index: 2;    -moz-box-shadow: 0 0 6px #789;    -webkit-box-shadow: 0 0 6px #789;    box-shadow: 0 0 6px #789;}


[解决办法]
CSS code
/*给ul增加样式:*/ul { margin:0; }
[解决办法]
探讨

CSS code
/*给ul增加样式:*/
ul { margin:0; }

热点排行