CSS：实现相邻Div中文字与线条对齐并兼容多浏览器

你需要将两个独立div中的文字和虚线对齐，但当前代码存在以下问题：Firefox中“Daily”文字紧贴容器左边界，虚线位置未对齐且偏下，同时无法满足所有布局需求。

需求 #

• 兼容Chrome、Firefox及IE8+
• 容器左边界与“Daily”文字之间保留间距
• 虚线填满剩余容器宽度
• “Daily”文字与虚线起始处保留间距

原代码 #

原CSS代码

.container {
  position: relative;
  width: 565px;
  float: left;
}

.daily {
  position: relative;
  width: auto;
  float: left;
}

.line {
  position: relative;
  float: left;
  width: 85%;
  top: 0px;
  border-bottom: dotted black 2px;
}

html>body .line {
  top: 15px;
}

原HTML代码

<div class="container">
  <div class="daily">Daily</div>
  <div class="line"></div>
</div>

修改后的解决方案 #

调整后的CSS代码

.container {
  position: relative;
  width: 565px;
  float: left;
  padding-left: 20px; /* 实现容器左边界与文字的间距 */
  box-sizing: border-box; /* 确保padding不扩大容器总宽度，IE8支持 */
}

.daily {
  display: inline-block; /* 替换float，避免布局塌陷，更易对齐 */
  vertical-align: middle; /* 与虚线垂直居中对齐 */
  margin-right: 15px; /* 实现文字与虚线的间距 */
}

.line {
  display: inline-block; /* 与文字同排显示 */
  vertical-align: middle; /* 与文字垂直居中对齐 */
  width: calc(100% - 70px); /* 自动计算剩余宽度：容器总宽 - 文字宽度 - 间距，IE9+支持 */
  border-bottom: dotted black 2px;
}

/* IE8兼容处理：不支持calc和部分inline-block场景，用float+固定宽度替代 */
@media \0screen {
  .daily {
    float: left;
    width: 60px; /* 给文字容器设固定宽度 */
  }
  .line {
    float: left;
    width: 465px; /* 容器宽度565 - 左padding20 - 文字宽度60 - 间距20 = 465，可按需调整 */
    margin-top: 8px; /* 手动调整垂直对齐位置 */
  }
}

调整后的HTML代码

<div class="container">
  <div class="daily">Daily</div>
  <div class="line"></div>
</div>

关键修改说明 #

1. 容器间距控制：通过.container的padding-left实现左间距，box-sizing: border-box保证容器总宽度不受padding影响，兼容IE8。
2. 垂直对齐修复：用inline-block替换float，配合vertical-align: middle实现文字与虚线的垂直居中，避免float导致的布局错位。
3. 自适应宽度：现代浏览器用calc让虚线自动填满剩余空间，无需固定百分比；IE8则通过固定宽度的方式适配。
4. 间距设置：给.daily添加margin-right，直接实现文字与虚线的间隔需求。

内容的提问来源于stack exchange，提问作者Quest