要使一个元素的宽度和前面的元素对齐，您可以使用CSS的display:inline-block属性，然后将元素的宽度设置为width:100%。这将使该元素成为行内块元素，并将其宽度设置为与其父元素相同的宽度，因此它将与前面的元素对齐。
例如，以下代码可以将两个相邻的div元素的宽度相等并对齐：
<style>
.box{
display:inline-block;
width:100%;
box-sizing:border-box;
}
</style>
<divclass="box">内容1</div>
<divclass="box">内容2</div>
在这个例子中，.box类指定了display:inline-block和width:100%，并使用box-sizing:border-box以确保padding和border不会增加元素的宽度。这将使两个div元素的宽度相等并对齐。
除了使用display:inline-block和width:100%，您还可以使用float属性和clear属性来使元素对齐。
例如，以下代码可以将两个相邻的div元素的宽度相等并对齐：
<style>
.box{
float:left;
width:50%;
box-sizing:border-box;
}
.clear{
clear:both;
}
</style>
<divclass="box">内容1</div>
<divclass="box">内容2</div>
<divclass="clear"></div>
在这个例子中，.box类指定了float:left和width:50%，并使用box-sizing:border-box以确保padding和border不会增加元素的宽度。使用float:left可以使两个div元素左对齐。为了避免浮动元素影响其他元素的布局，我们添加了一个空的div元素并应用了clear:both，这将清除前面的浮动元素。
注意，使用float属性可能会导致其他元素的布局受到影响，因此在使用float时需要格外小心。