div和input在網頁開發中都是常用的元素，div用于創建塊級元素，而input則用于創建表單控件。在設計網頁時，經常會遇到需要將div和input進行對齊的情況。本文將詳細介紹如何使用CSS來對齊div和input元素，并通過幾個代碼案例來說明。這些案例參考了其他真實文章中的實際需求，并采用了p標簽和pre標簽來展示代碼。
在CSS中，可以使用float屬性來對齊div和input元素。float屬性有left和right兩個值。當設置為left時，元素將向左浮動，后續元素會環繞在其右側；當設置為right時，元素將向右浮動，后續元素會環繞在其左側。通過對div和input元素設置不同的float屬性值，可以實現它們的對齊效果。
下面是一個簡單的示例，通過設置兩個div的float屬性來實現對齊效果：

<div style="float: left; width: 200px;">
<input type="text" name="input1">
</div>
<div style="float: right; width: 200px;">
<input type="text" name="input2">
</div>
<div style="clear: both;"></div>

在上面的代碼中，兩個div元素都設置了float屬性，一個向左浮動，一個向右浮動，這樣它們就能夠左右對齊。為了防止其后續元素被覆蓋，我們還需要在最后添加一個空的div，并設置clear屬性為both，這樣可以清除浮動效果。
除了使用float屬性外，我們還可以使用flexbox布局來對齊div和input元素。flexbox是CSS3中引入的一種彈性盒子布局模型，通過設置容器元素的display屬性為flex，可以實現元素的對齊和彈性伸縮效果。
下面是一個使用flexbox布局對齊div和input元素的示例：

<div style="display: flex;">
<input type="text" name="input1">
<input type="text" name="input2">
</div>

在上面的代碼中，我們將包含div和input元素的父級容器設置display屬性為flex，這樣它們就會被自動排列在一行，并根據設置的對齊方式來進行布局。默認情況下，flexbox布局會將子元素水平排列，可以通過設置justify-content屬性來改變對齊方式，如center居中對齊、flex-start頂部對齊、flex-end底部對齊等。此外，還可以使用align-items屬性來控制元素在交叉軸上的對齊方式。
通過使用上述的代碼案例，我們可以看到如何使用CSS來對齊div和input元素。這些案例參考了其他真實文章中的實際需求，并采用了p標簽和pre標簽來展示代碼。無論是使用float屬性還是flexbox布局，都可以輕松實現div和input的對齊效果。通過靈活運用CSS的各種屬性和布局模型，我們可以創建出更加美觀和功能完善的網頁。