css将两个元素水平对齐的方法(兼容IE8)

1. 简介

在开发网页过程中，经常会遇到需要将两个元素水平对齐的情况。CSS提供了多种方法来实现这个需求，本文将介绍一种兼容IE8的方法。

2. 使用浮动（float）

浮动是CSS中常用的布局方式，可以将元素从常规的文档流中脱离，使其水平排列。

首先，我们将两个需水平对齐的元素设置为浮动：

.element1, .element2 {
  float: left;
}

2.1 清除浮动

浮动元素的一个常见问题就是造成父元素高度塌陷，为了解决这个问题，我们需要清除浮动。

可以使用clearfix的方式清除浮动：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后，在父元素中添加clearfix类：

.parent {
  /* other styles */
  position: relative;
}
.parent::after {
  content: "";
  display: table;
  clear: both;
}

这样就可以确保父元素包含浮动的子元素，避免了高度塌陷的问题。

现在，我们可以将浮动的两个元素水平对齐了：

.element1, .element2 {
  float: left;
}

2.2 添加间距

如果需要在两个元素之间添加间距，可以通过设置margin属性来实现：

.element1 {
  margin-right: 10px;
}

这样，第一个元素的右侧会有10像素的间距。

3. 兼容IE8

在IE8中，浮动元素可能会出现对齐不准确的问题。为了解决这个问题，可以使用CSS Hack来实现对IE8的兼容。

.element1, .element2 {
  float: left;
  margin-right: 10px;
}
/* IE8 Hack */
.element2 {
  *margin-right: 0; /* 将element2的右外边距重设为0 */
}

上述代码中，我们给第二个元素添加了一个IE8 Hack，通过设置*margin-right: 0;来将其右外边距重设为0。这样就可以解决IE8中的对齐问题。

4. 总结

通过使用浮动和清除浮动的方式，我们可以实现两个元素的水平对齐。同时，通过使用CSS Hack，我们还可以解决IE8中的对齐问题，从而实现兼容性。

代码示例如下：

.element1, .element2 {
  float: left;
  margin-right: 10px;
}
/* IE8 Hack */
.element2 {
  *margin-right: 0; /* 将element2的右外边距重设为0 */
}

稍微调整一下代码，就可以适应不同的布局需求，希望本文的内容能对您有所帮助。