<!-- 广告横幅 --> 写一个完整的代码 通过html+css+jquery遍历ul下的li 使得6个li的内容在页面上横向显示
时间: 2024-04-07 11:30:40 浏览: 74
当然,下面是一个完整的示例代码,包含HTML、CSS和jQuery,可以通过遍历UL下的LI使得6个LI的内容在页面上横向显示:
```html
<!DOCTYPE html>
<html>
<head>
<title>遍历UL下的LI并横向显示内容</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex; /* 使用flex布局 */
}
li {
margin-right: 10px; /* 设置LI之间的间距 */
}
</style>
</head>
<body>
<ul id="myList">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myList li").each(function() {
$(this).show(); // 显示LI
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用HTML定义了一个UL列表,并将每个LI中的内容设置为"内容1"、"内容2"等。在CSS部分,我们使用`display: flex`将UL的布局设置为flex布局,这样可以实现横向显示LI的效果。我们还设置了LI之间的间距为10px,以增加可读性。
在jQuery部分,我们使用`$(document).ready`来确保在文档加载完成后执行代码。然后使用`$("#myList li")`选中UL下的所有LI元素,并使用`each`方法遍历每个LI,并通过`show`方法将其显示出来。
请确保在代码中引用了jQuery库。
阅读全文