CSS3是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常使用的一種技術(shù)。其中之一就包括如何橫向排列元素。下面我們就來(lái)講講CSS3橫向排列的幾種方法。

第一種方法是使用display屬性。

.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
}

使用flex屬性可以讓元素自適應(yīng)大小，并且可以橫向排列。通過(guò)設(shè)置margin屬性可以讓元素之間產(chǎn)生一定的間隔。

第二種方法是使用float屬性。

.container {
overflow: hidden;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
float: left;
}

設(shè)置float屬性可以讓元素浮動(dòng)，并按照從左到右的順序排列。但是需要注意的是，父元素需要設(shè)置overflow屬性，否則會(huì)導(dǎo)致浮動(dòng)元素超出容器的情況發(fā)生。

第三種方法是使用inline-block屬性。

.container {
font-size: 0;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
}

通過(guò)設(shè)置display屬性為inline-block可以讓元素按照從左到右的順序排列。但是需要注意的是，由于inline-block屬性會(huì)產(chǎn)生默認(rèn)的空格和換行符，需要設(shè)置font-size為0，并將元素的vertical-align屬性設(shè)置為top消除默認(rèn)間距。

以上就是CSS3橫向排列的幾種方法，希望能對(duì)您有所幫助。