0

我一直在编写使用 Skeleton 框架创建布局的教程。

我的问题是我已按照创建导航的步骤进行操作，但是当我将项目添加到子菜单时，它们似乎进入了新行。

解决这个问题的唯一方法是使子菜单的父级值更长，我不想这样做，我希望子菜单自动拉伸到文本的宽度。

看图片

我希望“短视频”显示在一行上。

下面是我在教程中使用的代码。

/*navigation*/
nav.primary ul,
nav.primary ul li {
	margin:0px;
}

nav.primary select {
	display: none;
	width: 100%;
	height: 28px;
	margin: 21px 0;
	
}

nav.primary ul li {
	diplay: inline;
	float: left;
	position: relative;
}

nav.primary ul li a {
	display: inline-block;
	line-height: 49px;
	padding: 0 14px;
	color: #ebebeb;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.08em;
}

nav.primary ul li a:hover {
	background-color: #424242;
	cursor: pointer;
}

/*sub menu*/

nav.primary li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

nav.primary ul ul {
    opacity: 0;
    filter: alpha(opacity=0);
    
	position: absolute;
	z-index: 999;
	background-color: #2d2c2c;
	
	display: inline-block;
	height: 0px;
	overflow: hidden;
	
	min-width: 100%;
	
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
	
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	
}

nav.primary ul li span {
	display: none;
}

nav.primary ul li:hover ul {
    opacity: 10;
    filter: alpha(opacity=100);
    
	height: auto;
	overflow: auto;
}

nav.primary ul ul li {
	float: none;
	display: list-item;
	border-bottom: 1px solid #383737;
}

nav.primary ul ul li a {
	display: block;
	line-height: 35px;
	text-transform: none;
}

nav.primary ul li:hover > a {
	background-color: #424242;
}
<div class="band navigation">
    
	<nav class="container primary">
	
		<div class="sixteen columns">
			
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Projects</a>
			
			<ul>
			<li><a href="#"><span>-</span>Short Videos</a>
			<li><a href="#"><span>-</span>Corporate</a>
			<li><a href="#"><span>-</span>Music</a>
			
			</ul>
			
			</li>
			<li><a href="#">Contact</a></li>
			
			
			</ul>
			
			
			</div>
			
	        </nav><!--end container-->
			</div><!--end band-->

谢谢

4

2 回答 2

1

由于您希望子菜单的宽度自动调整，因此将该white-space: nowrap语句应用于子菜单列表项。

nav.primary ul ul li {
    white-space: nowrap;
}

这将防止列表项在单词之间中断，并允许宽度自动调整以适应最宽的项目，而无需其他具有较短列表项的子菜单比必要的更宽。

W3schools.comwhite-space: nowrap上清楚地解释了该声明：

空白序列将折叠成单个空白。文本永远不会换行到下一行。文本在同一行继续，直到<br>遇到标签

尽管有这个定义，<br>只要规则应用于单个列表项而不是标记，就不需要<ul>标记。

于 2015-04-30T18:29:48.447 回答
0

你可以给子菜单项一个固定的宽度

nav.primary li ul li a {
width: 200px;   
padding: 0 20px;
}
于 2014-11-20T15:42:29.800 回答