Question

您是否可以使用CSS而不是JavaScript＆amp ;;来定位导航列表以使某些<li>标记之间具有垂直空格JQuery的？

它需要响应包含div或窗口高度的高度。导航列表的结构如下：

<ul>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Answer 1

请检查：http://jsfiddle.net/ssqnY/1/

li.spacer {
  margin: 0 0 30% 0;
}

也适用于回应。

Answer 2

您可以使用CSS以这种方式将垂直间距设置为某些li：使用li课程设置所需的spacer，然后：

li.spacer {
  margin: 15% 0;
}

您也可以将第一个li设置为有空格：

li:first {
  margin: 15% 0;
}

或者所有li都有空格：

li {
  margin: 15% 0;
}

Ps：15%值只是一个示例，您可以设置您想要的内容，也可以使用百分比，以提高响应速度，例如10px。

垂直对齐/间隔列表项

2 个答案: