为什么文本在 li 标签中开始一个新行

Why text starts a new line in li tag

本文关键字：一个 新行 开始 文本 li 标签 为什么      更新时间：2023-09-26

我有我用"ul"和"li"标签创建的下拉菜单。但是我在 li 标签中的文本在其中的每个空格处都开始一个新行。这是代码的链接。

 var a=document.getElementById("hide");
var outside="false";
function showjs(){
    if(visibil()==="false"){
 a.style.display="inline-block";   
    }
}
function hidejs(){
    if(visibil()==="true" & outside==="true"){
     a.style.display="none";   
    }
}
function visibil(){
    if (a.style.display==="none"){
       return "false";
    }else{
    return "true";   
    }
}
ul{
    list-style:none;
}
li{
    position:relative
}
.cl-menu,ul{
    margin:0;padding:0
}
.cl-menu li a{
    display:block;
    padding:10px
}
#menu{
    background-color:gray;
    width:20%;
}
/*li:active>ul{
    display:block;
}*/
li>ul{
    
    background-color:black
}
<body onclick="hidejs()">
<div id='menu'>
	<ul class="cl-menu">
		<li>
			<a href="#">Mis pedidos</a>
		</li>
		<li>
			<a href="#">Mi perfil</a>
		</li>
		<li>
			<a href="#">Descuentos</a>
		</li>
		<li id='albumes' onclick="showjs()" style="background-color:gray" onmouseleave="outside='true';" onmouseenter="outside='false';">
			<a href="#">Albumes</a>
			<ul id="hide" style="display:none;position:absolute; top:0;left:100%;">
				<li style="color:white">
					<a href="#">Here are generated new lines at every space</a>
				</li>
				<li>
					<a href="#">Navidad 2014</a>
				</li>
			</ul>	
        </li>
		 <li>
			<a href="#">Añadir al carrito</a>
		</li>
		 <li>
			<a href="#">Articulos seleccionados</a>
		</li>
		 <li>
			<a href="#">Finalizar Pedido</a>
		</li>
	</ul>
</div>
</body>

所以，我不想要那些新行，如果可以在不设置宽度的情况下解决。谢谢。

尝试设置文本white-space:nowrap并将display:inline-block添加到菜单中

var a=document.getElementById("hide");
var outside="false";
function showjs(){
    if(visibil()==="false"){
 a.style.display="inline-block";   
    }
}
function hidejs(){
    if(visibil()==="true" & outside==="true"){
     a.style.display="none";   
    }
}
function visibil(){
    if (a.style.display==="none"){
       return "false";
    }else{
    return "true";   
    }
}
ul{
    list-style:none;
}
li{
    position:relative
}
.cl-menu,ul{
    margin:0;padding:0
}
.cl-menu li a{
    display:block;
    padding:10px
}
#menu{
    background-color:gray;
    display: inline-block;
}
/*li:active>ul{
    display:block;
}*/
li>ul{
    
    background-color:black
}
li a{
   white-space:nowrap;
}
<body onclick="hidejs()">
<div id='menu'>
	<ul class="cl-menu">
		<li>
			<a href="#">Mis pedidos</a>
		</li>
		<li>
			<a href="#">Mi perfil</a>
		</li>
		<li>
			<a href="#">Descuentos</a>
		</li>
		<li id='albumes' onclick="showjs()" style="background-color:gray" onmouseleave="outside='true';" onmouseenter="outside='false';">
			<a href="#">Albumes</a>
			<ul id="hide" style="display:none;position:absolute; top:0;left:100%;">
				<li style="color:white">
					<a href="#">Here are generated new lines at every space</a>
				</li>
				<li>
					<a href="#">Navidad 2014</a>
				</li>
			</ul>	
        </li>
		 <li>
			<a href="#">Añadir al carrito</a>
		</li>
		 <li>
			<a href="#">Articulos seleccionados</a>
		</li>
		 <li>
			<a href="#">Finalizar Pedido</a>
		</li>
	</ul>
</div>
</body>

添加此规则：

#hide a {
    white-space:nowrap;
}

js小提琴示例

相关文章：