在文本基线上水平对齐块

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

如果您有private static void FolderStructure(string path) { Console.WriteLine(path); foreach (string item in System.IO.Directory.GetDirectories(path)) { FolderStructure(item); } } FolderStructure(@"X:\\My\\Path");

，则只需将text-align:right添加到nav即可

＆＃13;

＆＃13;

width

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另外，由于<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

＆＃13;

＆＃13;

display:table/table-cell

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>