css列表横向排列文字和图片
时间: 2024-08-14 16:07:58 浏览: 38
CSS可以轻松地将文本和图像并排排列在列表中,实现横向布局。这里是一种常见的做法:
1. **无序列表 (`ul`)**: 使用 `display: flex` 或 `grid` 属性可以使列表项元素水平排列。例如:
```css
ul {
list-style-type: none; /* 去除默认的项目符号 */
display: flex;
flex-wrap: wrap; /* 如果内容太多,换行显示 */
}
li {
flex: 1; /* 自适应宽度 */
margin-right: 10px; /* 可选:设置元素之间的间距 */
}
```
2. **带图片的列表项 (`li`)**: 每个列表项包含一个 `img` 元素和一些文本,可以这样组合样式:
```html
<ul class="horizontal-list">
<li>
<img src="image1.jpg" alt="描述1" style="width: auto; height: auto; max-width: 50%; float: left;">
<div style="float: left;">文字描述1</div>
</li>
<!-- 更多列表项 -->
</ul>
<style>
.horizontal-list li {
position: relative; /* 用于响应高度变化 */
width: calc(50% - 10px); /* 计算每个元素的一半宽度 */
padding-bottom: 10px; /* 防止图片溢出 */
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)