HTML-CSS：按字母顺序排列的导航栏列表，在一条水平线上带有附加的外部导航文本

如何解决HTML-CSS：按字母顺序排列的导航栏列表，在一条水平线上带有附加的外部导航文本

我正在尝试为项目制作按字母顺序排列的（A 到 Z）导航栏。除了按字母顺序排列的导航栏外，还有一些文本：“书名：”。所以最终产品应该是这样的：

书名：A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

使用我的代码，我只能使用以下 HTML 代码实现此结果，该代码将附加文本“书名：”放在导航栏和 ul 标签内，我听说这是不鼓励的。

'''

<body>

<nav>

<ul>
Book Title:

<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</nav>
</body>

'''

'''

/* Navigation Styles */ 

nav li{ 
list-style-type:none;
padding-left:30px;
display: inline-block; 
margin: 0; 
padding: 45px; 
}

nav>ul{
padding-left:0; /* makes the nav alphabetical bar align left without any padding. */
margin: 0;
padding: 0;
}

nav>ul>li{
padding-left:10px;
display: inline; /* makes all the alphabetical letter into one line when they were on separate lines 
before. */  
}

'''

@Community，如何在不将附加文本“书名：”放在 EDIT: nav 标签中的情况下，对单行导航栏进行 CSS 代码修改，该导航栏前面有附加文本?

所以这对于 HTML 来说将是理想的解决方案，但是在导航标签中没有附加文本“Book Tile:”的情况下，使附加文本与导航栏连接的 CSS 代码是什么？

'''

<body>
Book Title:

<nav>
<ul>


<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>

</nav>

</body>


'''

任何帮助将不胜感激 - 谢谢！

解决方法

我建议将标题移到 <ul> 之外并使其成为 <nav> 的一部分。从结构上讲，这更有意义。导航的标题是“书名”，您有一个字母索引列表。

<body>
    <nav>
        <h1>Book Title:</h1>
        <ul>
            <li>A</li>
            <li>B</li>
            ...
        </ul>
    </nav>

我通过使用 span 标签发现了这一点。虽然我没有从导航标签中得到“书名：”，但我确实为“书名：”提供了一个更兼容的标签，该标签保持了将“书名：”保持在同一行的解决方案格式：>

书名：A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

感谢所有伸出援手的人，这是一次很棒的第一次体验。这里有更多的解决方案，希望有一天我可以回报您的帮助并帮助您解决问题！ :)

HTML：

'''

<body>    

<nav>

<span>Book Title:</span>

<ul>

<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>

</ul>

</nav>

</body>

'''

CSS：

'''

/* Navigation Styles */ 

nav li{ 
list-style-type:none;
padding-left:0px;
display: inline; /* makes all the alphabetical letters into one line when they were on 
separate lines before. */
margin: 0;
padding: 55px; /* Controls spacing between a-z */
}

nav ul{
padding-left:0;
margin: 0;
padding: 0;
display: inline-block;
}

nav ul li{
padding-left:0px;
display: inline;    
}

'''

再次感谢！