css横向排列 文字 |css3导航栏

.container {
display: flex; /* 将容器设置为弹性布局 */
flex-direction: row; /* 默认为row，表示横向排列 */
}
.item {
flex: 1; /* 扩展比例为1，表示占据同一行的宽度 */
padding: 10px; /* 设置内边距 */
text-align: center; /* 文字居中对齐 */
}

上述代码中，大家设置了一个容器（class=”container”），并使用flex属性将其设置为弹性布局。接着，大家使用flex-direction属性将其设置为横向排列。

在容器内，大家设置了若干个项目（class=”item”），并使用flex属性将其扩展比例设置为1，表示占据同一行的宽度。同时，大家设置了内边距和文字居中对齐，使排列效果更美观。

实际上，flex还有很多其他的设置方式，如align-items、justify-content等。这些属性可以让大家更灵活地控制弹性布局的效果，让横向排列文字更加优美。