用HTML和css做一个两行四列的ul li
时间: 2024-03-18 19:39:38
浏览: 44
好的,以下是用 HTML 和 CSS 做一个两行四列的 ul li 的[代码]([http]([http](https://geek.csdn.net/educolumn/68f28ca3131d47699e5902c5d3d74d51?spm=1055.2569.3001.10083)s://geek.csdn.net/educolumn/68f28ca3131d47699e5902c5d3d74d51?spm=1055.2569.3001.10083)s://geek.csdn.net/educolumn/1572ef9b473b4e00f6b2bf6d428b7c27?spm=1055.2569.3001.10083):
```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>
```css
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
background-color: #ccc;
padding: 20px;
text-align: center;
请注意,上面的[代码](https://geek.csdn.net/educolumn/1572ef9b473b4e00f6b2bf6d428b7c27?spm=1055.2569.3001.10083)只是一个简单的示例,您可以根据需要进行[样式](https://geek.csdn.net/educolumn/24a10ad6a5bc75b9f6c92ee7d63d8e8b?spm=1055.2569.3001.10083)调整。
相关问题
用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>
请注意,上面的代码只是一个简单的示例,需要配合 CSS 样式才能呈现出两行四列的布局效果。
css 设置ul里的li 两个一行
你可以使用CSS的flexbox布局来实现这个效果。
首先,给`ul`设置`display: flex;`,然后给`li`