gpt4 book ai didi

html - CSS - 如何在一行中显示下拉文本?

转载 作者:行者123 更新时间:2023-11-28 00:27:14 24 4
gpt4 key购买 nike

我正在构建一个下拉菜单,但我在这个 img 上显示了一个问题: enter image description here

我希望“2.1”文本显示在“元素”文本旁边。出于某种原因,每个新词都会换行。

这是 html:

<ul id='nav'> 
<li><a href='/'>Item 1</a></li>
<li><a href='/'>Item 2</a>
<ul>
<li><a href='/'>Item 2.1</a></li>
</ul>
</li>
<li><a href='/'>Item 3</a></li>
<li><a href='/'>Item 4</a></li>
<li><a href='/'>Item 5</a></li>
</ul>

这是 CSS:

#nav {
list-style: none;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
margin-right: 5px;
}
#nav li ul {
position: absolute;
}
#nav li ul li {
display: block;
}
#nav li ul li a {
padding: 0px 10px;
height: 20px;
text-align: left;
background: #999;
}

感谢您的帮助,迈克。

最佳答案

解决此问题的一个简单方法是将 nowrap 属性添加到 #nav li ul li a:

#nav li ul li a {
padding: 0px 10px;
height: 20px;
text-align: left;
background: #999;
white-space: nowrap; /* Forbids text wrapping */
}

关于html - CSS - 如何在一行中显示下拉文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4913344/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com