在網(wǎng)頁開發(fā)中，我們經(jīng)常需要對元素進行樣式設(shè)置。其中，一種常見的需求是將多個元素橫向排列。這篇文章將介紹如何使用CSS實現(xiàn)輸入框的橫向排列。

方法一：使用float

input{
float: left; 
margin-right: 10px; 
}

使用float屬性可以將多個輸入框橫向排列。在這個例子中，我們使用了左浮動（float: left），并且為每個輸入框設(shè)置了右邊距（margin-right: 10px），以便防止它們之間過于擠在一起。需要注意的是，使用float進行橫向排列時，容器元素的高度通常會塌陷，因此需要在容器元素上設(shè)置清除浮動（clear: both）。

方法二：使用display

.input-wrapper{
display: flex;
}
input{
margin-right: 10px; 
}

使用display屬性也可以將多個輸入框橫向排列。在這個例子中，我們使用了彈性布局（display: flex）來定義一個輸入框的容器元素，所有的輸入框都會被自動均勻地分布到容器元素中。需要注意的是，彈性布局需要瀏覽器的兼容性支持，在一些老版本瀏覽器中可能會失效。