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

Question

我正在尝试为项目制作按字母顺序排列（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，我如何对一个单行导航栏进行 CSS 代码修改，该导航栏前面有额外的文本，但不在其中放置额外的文本“Book Title:”编辑：导航标签？

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

'''

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


'''

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

Answer 1

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

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

Answer 2

我使用 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

感谢所有伸出援手的人，这是一次很棒的初次体验。这里有更多的解决方案，希望有一天我能 return 帮您解决问题！ :)

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

'''

再次感谢！

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

HTML-CSS: Alphabetical Nav Bar list with Additional Outside Nav Text on one Horizontal Line

css

inline

padding

html-lists

nav