html代码,与上面的部分间隔20px,再写20个链接,每行5个,共计四行,要对齐,适合页面宽度,每个链接前面要有一个图标。超链接的文字要用绿色,每一行链接要与屏幕宽度适应,居中
时间: 2024-05-29 14:11:28 浏览: 15
<div style="margin-top:20px;">
<div style="display:flex;justify-content:space-between;flex-wrap:wrap;">
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 1</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 2</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 3</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 4</span>
</a>
<a href="#" style="display:flex;align-items:center;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 5</span>
</a>
</div>
<div style="display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:20px;">
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 6</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 7</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 8</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 9</span>
</a>
<a href="#" style="display:flex;align-items:center;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 10</span>
</a>
</div>
<div style="display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:20px;">
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 11</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 12</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 13</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 14</span>
</a>
<a href="#" style="display:flex;align-items:center;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 15</span>
</a>
</div>
<div style="display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:20px;">
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 16</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 17</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 18</span>
</a>
<a href="#" style="display:flex;align-items:center;margin-right:20px;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 19</span>
</a>
<a href="#" style="display:flex;align-items:center;">
<img src="icon.png" alt="icon" style="height:20px;margin-right:5px;">
<span style="color:green;">Link 20</span>
</a>
</div>
</div>
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)