li怎么让文字在图片下面_div+css(ul li)实现图片上文字下列表布局
时间: 2023-10-01 09:07:31 浏览: 40
您可以使用以下步骤来实现图片上文字下列表布局:
1. 使用`<div>`标签包裹图片和文本,为其添加一个`class`名,比如`container`。
2. 在`<div>`标签内部先放置图片,使用`<img>`标签,并设置`width`和`height`属性。
3. 在图片下面添加一个`<ul>`标签,用于放置列表。
4. 在`<ul>`标签内部添加`<li>`标签,用于放置每一条列表项。
5. 在`<li>`标签内部添加需要展示的文本,可以使用`<h3>`、`<p>`等标签。
6. 使用CSS样式设置`container`的宽度和高度,以及图片和文本的位置和样式。
以下是一个示例代码:
HTML:
```
<div class="container">
<img src="your-image-url.jpg" width="200" height="200">
<ul>
<li><h3>List Item 1</h3><p>Description of list item 1</p></li>
<li><h3>List Item 2</h3><p>Description of list item 2</p></li>
<li><h3>List Item 3</h3><p>Description of list item 3</p></li>
</ul>
</div>
```
CSS:
```
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
p {
font-size: 14px;
}
```
这样就可以实现图片上文字下列表布局了。