Question

HTML：

<div class="container">
    <h1>FIRST</h1>
    <span class="second">This is second text</span>

    <span class="third">Third text</span>
</div>

CSS：

.container {
    padding-bottom:10px;
    border-bottom:1px solid;
    position:relative;
}

h1 {
    display:inline;
    margin:0;padding:0;
}

.second {
    margin-left:10px;
}

.third {
    position:absolute;
    right:0;bottom:10px;
}

问题：

第三个文本似乎与其他文本在同一基线上没有对齐。
由于我使用绝对位置设置底部属性（第三个文本），这意味着如果我更改容器的底部填充，我也需要设置此属性。是否可以“自动”调整？

Answer 1

我可以添加额外的标记吗？如果是这样，使用inline-block和vertical-align是一种可能的解决方案：

<div class="container">
  <div>
    <h1>FIRST</h1>
    <span class="second">This is second text</span>
  </div><div>
    <span class="third">Third text</span>
  </div>
</div>

请注意，两个div元素之间没有空格。这是因为inline-block受到空格的影响。

.container {
    padding-bottom:10px;
    border-bottom:1px solid;
}
.container * {
  display: inline-block;
  vertical-align: bottom;
}
.container div {
  width: 75%;
  text-align: left;
}
.container div + div {
  width: 25%;
  text-align: right;
}
h1 {
    display:inline;
    margin:0;padding:0;
}
.second {
  margin-left: 10px;
}

请参阅http://cssdesk.com/pghv7

Answer 2

如果不删除position:absolute，就无法完成。使用绝对定位会使元素脱离正常流量，因此您需要手动定位。

Answer 3

.third {
    position:absolute;
    right:0;
    top:0;
    height:20px;
    bottom:0;
    margin:auto;
}

你可以用它。它将文本设置在大约位置。

如何在同一基线上对齐3个文本？

3 个答案: