HTML最外面有一个ul这样的一个列表,完了这个列表里面有三行,有四行,有四行,第一行是那个标题,完了后面三行是图片,每一行里面你看我又画了一个ul,就说明这个Li里边又嵌套了一个ul这样的列表,而这个列表内部还有三张图片,那也就是三个Li里面分别有三个ul
时间: 2023-04-08 16:02:15 浏览: 50
的子列表,每个子列表里面有一张图片。请问,这个HTML代码应该怎么写?
<ul>
<li>标题
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</li>
<li>
<ul>
<li><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
<li><img src="image6.jpg"></li>
</ul>
</li>
<li>
<ul>
<li><img src="image7.jpg"></li>
<li><img src="image8.jpg"></li>
<li><img src="image9.jpg"></li>
</ul>
</li>
</ul>
相关问题
用HTML做一个两行四列的ul li
好的,以下是用 HTML 做一个两行四列的 ul li 的代码:
```html
<ul class="grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
```
请注意,上面的代码只是一个简单的示例,需要配合 CSS 样式才能呈现出两行四列的布局效果。
用HTML和css做一个两行四列的ul li
好的,以下是用 HTML 和 CSS 做一个两行四列的 ul li 的代码:
```html
<ul class="grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
```
```css
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
li {
background-color: #ccc;
padding: 20px;
text-align: center;
}
```
请注意,上面的代码只是一个简单的示例,您可以根据需要进行样式调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)