在文本基线上水平对齐块

Question

我有以下 HTML 代码：

<header>
    <h1>Title</h1>

    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </nav>
</header>

我希望通过向右浮动<nav> 将其变成我网页顶部的一行。

但是，由于<h1> 的字体大小比<li> 元素大得多，因此文本会错位。 我希望元素在基线上对齐。在图片中：

注意基线的红线。这就是我现在拥有的：

#float, #nofloat { width: 300px; }

ul, h1, nav, p { margin: 0; padding: 0; }

h1 {
  display: inline-block;
  font-size: 3rem;
}

nav { display: inline-block; }
ul { list-style-type: none; }
ul > li { display: inline; }
ul > li:after { content: " | "; }
ul > li:last-child:after { content: ""; }

#float nav { float: right; }

<p>Everything is aligned to baseline before floating:</p>
<div id="nofloat">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

<p>But after floating it's messed up:</p>
<div id="float">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

Answer 1

如果您有固定的width，您可以简单地将text-align:right 添加到您的nav

#float,
#nofloat {
  width: 300px;
}

ul,
h1,
nav,
p {
  margin: 0;
  padding: 0;
}
h1 {
  display: inline-block;
  font-size: 3rem;
  width:auto;
}
nav {
  display: inline-block;
  width:200px
}
ul {
  list-style-type: none;
}
ul > li {
  display: inline;
}
ul > li:after {
  content: " | ";
}
ul > li:last-child:after {
  content: "";
}
#float nav {
 text-align:right
}

<p>Everything is aligned to baseline before floating:</p>
<div id="nofloat">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

<p>But after floating it's messed up:</p>
<div id="float">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

另外，由于 inline-block 存在间隙问题（可修复），您可以使用 display:table/table-cell

#float,
#nofloat {
  width: 300px;
  display: table;
}

ul,
h1,
nav,
p {
  margin: 0;
  padding: 0;
}
h1 {
  display: table-cell;
  font-size: 3rem;
  width:auto;
}
nav {
  display: table-cell;
  width:200px
}
ul {
  list-style-type: none;
}
ul > li {
  display: inline;
}
ul > li:after {
  content: " | ";
}
ul > li:last-child:after {
  content: "";
}
#float nav {
 text-align:right
}

<p>Everything is aligned to baseline before floating:</p>
<div id="nofloat">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

<p>But after floating it's messed up:</p>
<div id="float">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

Answer 2

您的 HTML 标记适用于使用 CSS 表格的解决方案。

将display: table 应用到header，并将宽度设置为 100%，这将强制它采用父容器的宽度。

将display: table-cell 应用于nav 并设置width: 1% 以强制其具有收缩以适应宽度。要防止文本换行，请设置white-space: nowrap。

只要您的标题可以容纳剩余空间，这将可以正常工作，但您可以根据您的布局调整细节。

#float, #nofloat { width: 300px; }

ul, h1, nav, p { margin: 0; padding: 0; }

h1 {
  display: inline-block;
  font-size: 3rem;
}

nav { display: inline-block; }
ul { list-style-type: none; }
ul > li { display: inline; }
ul > li:after { content: " | "; }
ul > li:last-child:after { content: ""; }

header {
  border: 1px dotted gray;
}

#float header {
  display: table;
  width: 100%; /* the parent div has a width */
}

#float nav { 
  display: table-cell;
  width: 1%; /* forces this cell to shrink-to-fit */
  white-space: nowrap;
  border: 1px dotted blue;
}

<p>Everything is aligned to baseline before floating:</p>
<div id="nofloat">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>

<p>But after floating it's messed up:</p>
<div id="float">
  <header>
    <h1>Title</h1>

    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
</div>