Question

2个问题，所以我想创建这个导航栏，我在网上找到了这个例子。当我添加更多li时，代码的方式是为什么它们换成第二行为什么？。

主要问题 - 我想为导航栏添加更多li，它使用nth-child将每个li定位到样式，我希望它更改为每个li都有一个特定的类，以便我可以添加更多的li和样式每一个方式，而不是使用nth-child。我尝试了它，并且无法让它们按照它们在代码更改之前的样式进行样式化，而是只是排队。

PS：为什么wrapper在此编辑器中执行此操作，但在我的编辑器和浏览器上正在按预期工作。

body{
	margin: 0px;	
}

#wrapper{
	background-color: #ffffff;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	padding: 30px;
	width:940px;
	border: 15px solid #B4D8E7;
	border-radius: 10px;
}


/*---2 Column-Right Layout----------------------*/ 
.layout-two-column-right #alpha { width: 650px; }
.layout-two-column-right #beta { width: 310px; }


ul.polaroids-menu { 
	width: 280px; 
	margin: 30px 0 18px -55px;
	list-style-type: none;
	}

ul.polaroids-menu a, ul.polaroids-menu a:hover { 
	display: inline;
	float: left; 
	width: auto;
	margin: 0 0 27px 30px; 
	padding: 6px 6px 3px; 
	background: #fff; 
	font-family: "Marker Felt", sans-serif; 
	text-align: center; 
	text-decoration: none; 
	color: #333; 
	font-size: 14px; 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); 
	/* default/first image rotation */
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-webkit-transition: -webkit-transform .15s linear; 
	}

ul.polaroids-menu img { 
	display: block; 
	width: 80px; 
	margin-bottom: 6px; 
	border-radius: 0; 
	border: 0;
	}

ul.polaroids-menu a:after { content: attr(title); }

/* #2 About Me */		
ul.polaroids-menu li:nth-child(2n) a { 
	-webkit-transform: rotate(6deg);  
	-moz-transform: rotate(6deg); 
	margin-left: -8px;
	margin-top: 20px;
	}

/* #3 My Shop */
ul.polaroids-menu li:nth-child(3n) a { 
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); 
	margin-top: -175px; 
	margin-left: 185px; 
	}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */		
ul.polaroids-menu li a:hover { 
	-webkit-transform: scale(1.25); 
	-moz-transform: scale(1.25); 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	position: relative; 
	z-index: 5; 
	}

<Doctype html>
<html lang="en">
   
<head>
   	<title>polaroids</title>
   	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="wrapper">
		<nav>
   		<ul class="polaroids-menu">
        <li><a href="http://www.example.com" title="My Family"><img src="http://themes.typepad.com/images/polaroid-myfamily.jpg" /></a></li>
        <li><a href="http://www.example.com" title="About Me"><img src="http://themes.typepad.com/images/polaroid-aboutme.jpg" /></a></li>
        <li><a href="http://www.example.com" title="My Shop"><img src="http://themes.typepad.com/images/polaroid-myshop.jpg" /></a></li>
      </ul>
    </nav>
  </div>
</body>
</html>

Answer 1

它被插入到第二行，因为width的{{1}}为280px，其中列表项中的每个ul.polaroids-menu为80px，包含边距，计算出的宽度为image width 。如果要添加其他列表项，我建议考虑宽度和边距来计算父容器的宽度。

另外，要为每个列表项指定特定的css，您可以在css中使用特定的子选择器。

要获得额外的第4个链接：

280px

请注意，每个链接图片的属性ul.polaroids-menu li:nth-child(4) a { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); margin-top: -155px; margin-left: 275px; }和margin-top都不同。

同样，您可以添加第5个图像链接到列表并为其添加相关的CSS。您可以选择使用margin-left和-webkit-transform -moz-transform旋转 margin-left angle property and update the宽度来倾斜图像：80px`

我还没有精确计算包含边距的图像的宽度。但是它应该为你提供足够的想法来解决它。基本是每个图像是80px所以对于4个图像，父容器应该有'320px＆＃39;最小宽度。您可以使用开发工具查看保证金如何达到确切数字。或者你应该通过css代码来计算。

<强>更新 value considering each image is of css选择器定位所有偶数（2个＆＃39; s的多个）ul.polaroids-menu li:nth-child(2n) a li a和ul个css选择器目标的所有奇数（倍数） 3）。

为什么需要特定的子css选择器 您的要求是将所有图像对齐成一行。

ul.polaroids-menu li:nth-child(3n) a主要用于相应地对图像进行空间处理。最终使用特定的子css选择器，您可以为每个图像指定所需的左边距以及顺时针或逆时针的图像倾斜度。

这也意味着你不能在你的情况下使用（2n）和（3n）。因为它会对所有偶数和奇数编号的子项应用完全相同的margin-left值。这可能会导致意外结果。

为什么CSS适用于您的示例？由于只有3个图像（2n）css仅应用于第2个图像，（3n）css仅应用于第3个图像。第一张图像不受任何影响。但是，只要添加第4个图像（2n）属性就会应用于具有相同左边距的第4个图像，从而产生不良后果。

使包装正常工作添加以下css属性。

margin-left

工作示例JSFiddle https://jsfiddle.net/behc9zoj/

我希望它可以帮助您清除您的理解。

Navbar的宝丽来瓷砖

1 个答案: