CSS中有多種方法可以控制子元素的排列方式，下面將介紹其中的三種方式。

1. float浮動

.parent{
width: 500px;
}
.child{
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}

上述代碼中，parent為父元素，child為子元素。使用float屬性可以讓子元素左右浮動，從而實現一個橫向排列的效果。

2. display: inline-block;

.parent{
font-size: 0;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
margin-right: 10px;
font-size: 16px;
}

上述代碼中，為了消除inline-block元素之間出現的空隙，需要在父元素上使用font-size: 0;。通過將display屬性設置為inline-block，可以讓子元素橫向排列，每個子元素之間的間距可以通過margin來控制。

3. flex布局

.parent{
display: flex;
}
.child{
flex: 1;
height: 100px;
margin-right: 10px;
}

上述代碼中，通過將display屬性設置為flex，可以使用flexbox來控制子元素的排列。使用flex: 1;可以讓每個子元素自適應父元素的寬度，從而實現橫向排列。間距則可以通過margin來控制。