Question

我想增加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>

Answer 1

使用margin或padding：

<强> CSS ：

li {
    padding-top: 15px;
}

Answer 2

使用CSS line-height：

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

文字将垂直居中。我的偏好，因为它对所有inline和block元素都有效，但在几个元素中有一个选项。

Answer 3

问题是您已将li元素设置为display:inline;。 inline个元素无法使用height。相反，请使用display:inline-block;或float:left;和display:block;

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

增加列表项之间的分隔符长度

3 个答案: