时间戳

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

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

问题描述

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

书名：ABCDEFGHIJKLMNOPQRSTU VWXYZ

使用我的代码，我只能使用以下 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代码修改，该导航栏前面有附加文本，所有在同一行上，而不在编辑：导航标签内放置附加文本“书名：”？

所以这对于 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>


'''

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

标签： csshtml-listspaddinginlinenav

解决方案

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

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

推荐阅读