橫向均勻分布是CSS中常用的布局方式之一。通過合理的設置,能夠讓頁面上的元素在水平方向等間距地排列,達到美觀且易于閱讀的效果。
下面是一些常用的CSS代碼示例:
.container { display: flex; justify-content: space-between; } .item { flex: 1; margin-right: 10px; } .item:last-of-type { margin-right: 0; }
在上面的代碼示例中,我們使用了flex布局,并通過justify-content屬性將item元素均勻分布在其父容器中。同時,通過設置item元素的flex屬性,讓它們在水平方向上平均占據父容器空間(即等寬排列),并通過margin-right屬性調整相鄰元素之間的間距。
需要注意的是,以上代碼只適用于現代瀏覽器。如果需要支持IE9及以下的瀏覽器,需要借助float或table等布局方式來實現橫向均勻分布。
上一篇css橫向平均間距代碼
下一篇css橫向動畫