问个CSS布局的问题。
我照着书上敲的代码,这是我的页面的显示样式:
不知道知道怎么回事,两行之间总有空隙。我希望两行之间不要有那个空隙。请问,该怎么改?
<!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"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class=""><strong>01</strong><a href="view.php?event_id=1">New Year's 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"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class="fill"> </li> <li class="fill"> </li> </ul></div><!-- end #content --></body></html>
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;}
/*给ul增加样式:*/ul { margin:0; }
[解决办法]