css 2个ul并排 |select 纯css 美化

在网页设计中，大家经常会需要将两个或多个无序列表（ul）横向并排排列。这时候，CSS样式就可以派上用场了。首先，大家需要在HTML中创建两个ul元素，分别给它们添加一个唯一的ID以便于CSS选择器定位。

<ul id="first-list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ul id="second-list">
<li>列表项A</li>
<li>列表项B</li>
<li>列表项C</li>
</ul>

然后，在CSS文件中，大家可以使用以下样式将这两个ul元素并排排列：

/* 创建一个父元素容器 */
.parent {
display: flex; /* 设置为弹性盒子 */
flex-direction: row; /* 水平方向排列 */
}
/* 选择需要并排排列的两个ul元素 */
#first-list, #second-list {
margin: 0; /* 去除默认外边距 */
padding: 0; /* 去除默认内边距 */
list-style: none; /* 去除默认列表样式 */
}
/* 可选：指定每个列表项的宽度和高度 */
#first-list li, #second-list li {
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
background: #eee; /* 做个背景显眼点 */
border: 1px solid #ccc;
}

最后，在HTML中，大家可以创建一个父元素容器，将这两个ul元素放入其中。

<div class="parent">
<ul id="first-list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ul id="second-list">
<li>列表项A</li>
<li>列表项B</li>
<li>列表项C</li>
</ul>
</div>

通过上述CSS样式，大家就可以将这两个ul元素横向并排排列，使界面更加美观、易用。