Question

我有下拉菜单，我用＆＃34; ul＆＃34;和＆＃34; li＆＃34;但我在li标签中的文字会在其中的每个空格处开始一个新行。这是代码的link。

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

Answer 1

添加此规则：

#hide a {
    white-space:nowrap;
}

<强> jsFiddle example

Answer 2

尝试将white-space:nowrap设置为文本，然后将display:inline-block添加到菜单

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: