在文本基线上水平对齐块元素

Question

在文本基线上水平对齐块元素

3

I have the following HTML code:

<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>

- orlp

Downvoter，能解释一下为什么我的问题“没有展示任何研究努力；不清楚或者没有用处”吗？ - orlp

1

很难说为什么会被踩；你的问题提得很好，简明扼要，并且展示了一些代码和努力。也许在SO档案中有一个类似的问题，但是尝试搜索一下... - Marc Audet

2

@MarcAudet 我确实搜索了重复的问题，有类似的问题，但没有一个尝试将块内的文本与基线对齐。无论如何，如果这是一个重复的问题，那也不是一个有效的降低投票的理由 - 关闭按钮就是为此而设的（或者如果您没有足够的声望，则使用旗帜按钮）。 - orlp

有时在SO上找到一个现成的解决方案就像大海捞针一样困难；相似的问题可能会用不同的方式表达，以至于无论你使用多么有创意的搜索词汇，它们也永远不会出现在搜索结果中。 - Marc Audet

2个回答

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>

- Marc Audet

这与我在回应dippas答案时找到的解决方案相比如何？https://jsfiddle.net/dnzdvwjo/ 与我的解决方案相比，1％的宽度和white-space似乎有些hacky。 - orlp

本质上是一样的，当我在回答问题时，dippas发布了他的解决方案，所以我们都想出了相同的技术。唯一的区别是我对表格单元格宽度的处理略有不同。 - Marc Audet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dippas · Accepted Answer

如果您的导航栏有固定的宽度，您可以简单地在nav中添加text-align:right。

#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>