增加列表項目之間的分隔符長度

我想增加li標籤之間的行分隔符高度。我試過使用height:100%但它不工作。增加列表項目之間的分隔符長度

我遵循正確的方法。誰能幫忙？

CODE：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
li { 
    display:inline; 
    list-style-type:none; 
    padding-left:1em; 
    margin-left:1em; 
    border-left:1px solid #ccc; 
} 
li:first-child { 
    border-left:none 
} 
</style> 
</head> 
<body> 
<table cellspacing="0px;" style="border-top-width:0.1px; 
    border-top-style:solid;border-top-color:#ccc; border-bottom-color:#ccc; 
    border-bottom-style:solid; border-bottom-width:0.1px;"> 
    <tr> 
    <td><ul> 
     <li><a href="#">Item one</a></li> 
     <li><a href="#">Item two</a></li> 
     <li><a href="#">Item three</a></li> 
     <li><a href="#">Item four</a></li> 
     </ul></td> 
    </tr> 
</table> 
</body>

來源

2012-02-09 coder25

問題是，您已將li元素設置爲display:inline;。 inline元素不能採取height。相反，使用display:inline-block;或float:left;和display:block;

li { 
    ... 
    display:block; 
    float:left; 
    height:50px; 
    ... 
}

來源

2012-02-09 16:58:26

THKS顯示：inline-block的工作，但你能解釋一下什麼是使用浮動：離開這裏 – coder25 2012-02-11 07:51:29

使用margin或padding：

CSS：

li { 
    padding-top: 15px; 
}

來源

2012-02-09 16:55:10 jackJoe

使用CSS line-height：

li { 
    line-height: /*set height of li here */; 
}

文本將垂直居中。我的偏好，因爲它對所有inline和block元素都有效，儘管其中有一個選項。

來源

2012-02-09 16:55:18 paislee

增加列表項目之間的分隔符長度

回答

相關問題