Question

这是我想要做的：

上表是使用table标记完成的，表中的每个td都设置为宽度为100px。

<html>    
<header>    
<meta charset="gbk" />    
<style type="text/css">    
div.whole {    
     padding: 200px 0 0 0;    
     border:2px solid red;    
     width:600px;    
     margin:0 auto;    
     align:center;}    
p.h {width:600px;text-align:center;}    
td{    
    width:100px;    
    border-bottom: 1px dashed black;}    
</style>    
</header>    


<body>    
<div class="whole">    
<p class='h'>Ò»ÖÜ¿Î³Ì±í</p>    
<table>    
<tr>    
<td>Ê±Œä/ÐÇÆÚ</td><td>ÖÜÒ»</td><td>ÖÜ¶þ</td><td>ÖÜÈý</td><td>ÖÜËÄ</td><td>ÖÜÎå</td>    
</tr>    
<tr>    
<td>9:00</td><td>Ó¢Óï</td><td>ÓïÎÄ</td><td>ÎÞ</td><td>ÌåÓý</td><td>ÊýÑ§</td>    
</tr>    
<tr>    
<td>10:00</td><td>ÎÞ</td><td>ÌåÓý</td><td>Ó¢Óï</td><td>ÌåÓý</td><td>ÊýÑ§</td>    
</tr>    
<tr>    
<td>11:00</td><td>ÎÞ</td><td>ÌåÓý</td><td>Ó¢Óï</td><td>ÌåÓý</td><td>ÊýÑ§</td>    
</tr>    
<tr>    
<td>12:00</td><td>Ó¢Óï</td><td>Ó¢Óï</td><td>ÊýÑ§</td><td>ÓïÎÄ</td><td>ÎÞ</td>    
</tr>    

<tr>    
<td>×Ü¿ÎÊ±</td><td>2</td><td>4</td><td>3</td><td>4</td><td>3</td>    
</tr>    
</table>    
</div>    
</body>    
</html>

我正在尝试用li table实现相同的显示效果。

   <html>
<header>
<meta charset="gbk" />
<style type="text/css">
div.whole {
     padding: 200px 0 0 0;
     border:2px solid red;
     width:600px;
     margin:0 auto;
     align:center;}
p.h {width:600px;text-align:center;}
li{ display:inline;
    border-bottom: 1px dashed black;
    width:100px;}
</style>
</header>

<body>
<div class="whole">
<p class='h'>Ò»ÖÜ¿Î³Ì±í</p>

<ul>
<li>Ê±Œä/ÐÇÆÚ</li><li>ÖÜÒ»</li><li>ÖÜ¶þ</li><li>ÖÜÈý</li><li>ÖÜËÄ</li><li>ÖÜÎå</li>
</ul>
<ul>
<li>9:00</li><li>Ó¢Óï</li><li>ÓïÎÄ</li><li>ÎÞ</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>10:00</li><li>ÎÞ</li><li>ÌåÓý</li><li>Ó¢Óï</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>11:00</li><li>ÎÞ</li><li>ÌåÓý</li><li>Ó¢Óï</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>12:00</li><li>Ó¢Óï</li><li>Ó¢Óï</li><li>ÊýÑ§</li><li>ÓïÎÄ</li><li>ÎÞ</li>
</ul>

<ul>
<li>×Ü¿ÎÊ±</li><li>2</li><li>4</li><li>3</li><li>4</li><li>3</li>
</ul>

</div>
</body>
</html>

显示的效果是

为什么li标记不能设置为100px？我可以使用哪些其他方法来获得相同的格式化结果？
要将内联块设置为乱码，css代码已更改。

<html>
<header>
<meta charset="gbk" />
<style type="text/css">
div.whole {
     padding: 200px 0 0 0;
     border:2px solid red;
     width:660px;
     margin:0 auto;
     align:center;}
p.h {width:660px;text-align:center;}
li{ list-style:none;
    margin:0 0;
    padding 0 0 0 0;
    display:inline-block;
    border-bottom: 1px dashed black;
    width:100px;}
</style>
</header>

<body>
<div class="whole">
<p class='h'>Ò»ÖÜ¿Î³Ì±í</p>

<ul>
<li>Ê±¼ä/ÐÇÆÚ</li><li>ÖÜÒ»</li><li>ÖÜ¶þ</li><li>ÖÜÈý</li><li>ÖÜËÄ</li><li>ÖÜÎå</li>
</ul>
<ul>
<li>9:00</li><li>Ó¢Óï</li><li>ÓïÎÄ</li><li>ÎÞ</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>10:00</li><li>ÎÞ</li><li>ÌåÓý</li><li>Ó¢Óï</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>11:00</li><li>ÎÞ</li><li>ÌåÓý</li><li>Ó¢Óï</li><li>ÌåÓý</li><li>ÊýÑ§</li>
</ul>
<ul>
<li>12:00</li><li>Ó¢Óï</li><li>Ó¢Óï</li><li>ÊýÑ§</li><li>ÓïÎÄ</li><li>ÎÞ</li>
</ul>

<ul>
<li>×Ü¿ÎÊ±</li><li>2</li><li>4</li><li>3</li><li>4</li><li>3</li>
</ul>

</div>
</body>
</html>

显示的效果如下：

现在如何删除行开头和结尾的空白？为了使两个css完全相同的显示效果？

Answer 1

内联元素无法设置宽度。将元素设置为内联块：

jsFiddle Demo

HTML：

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

CSS：

li{width:80px;list-style:none;text-align:center;border:1px solid grey;}
/*  li{display:inline;}  */
li{display:inline-block;}  /*  comment out */

Answer 2

将标签添加到display:inline-block

label{display:inline-block;}

为什么<li>标签宽度不能设置为100px？

2 个答案: