Question

尝试了一会儿，但是它们都在右下方的顶部堆积？这就是我所拥有的。我想在链接周围留一个边距，但我似乎无法将它们分开？任何帮助将不胜感激，

＆＃13;

#banner {
	background-color: grey;
	color:white;
	height: 100px;
	margin-top: 100px;
	padding: 10px;
	width: 100%;
	position:relative;
	
}
#link {
	padding: 0px;
	margin-right: 30px;
	margin-bottom:20px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	display:inline-block;
	position:absolute;
	bottom:0;
	right:0;
  }
.selector{ background-color: white;
	color: grey;
	padding: 5px;
}

＆＃13;

<body>
<div id="banner">
<div id="link"> <div class="selector">Home</div> </div>
<div id="link">About</div>
<div id="link">Projects</div>
<div id="link">About</div>
<div id="link">Contact</div>
</div>
</body>

＆＃13;

Answer 1

您的问题是您在五个元素上使用相同的ID。 ID只能使用一次。如果你想为几个元素使用相同的CSS，请使用我在下面做的类：我将公共属性放入我分配给所有5个元素的类<input name="1" value="25"> <input name="2" value="50" readonly> <p>Hello World</p>中。我将5个元素的ID分别命名为“link1”到“link5”，并将第5个元素的单独属性放入ID link

#link5

#banner {
	background-color: grey;
	color:white;
	height: 100px;
	margin-top: 100px;
	padding: 10px;
	width: 100%;
	position:relative;
	
}
.link {
	padding: 0px;
	margin-right: 30px;
	margin-bottom:20px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	display:inline-block;  
}
#link5 {
	position:absolute;
	bottom:0;
	right:0;
  }
.selector{ background-color: white;
	color: grey;
	padding: 5px;
}

Answer 2

您可以在#link类中更改位置：absolute，到relative，也可以使用正确的类更改为另一个div，如下所示：

.right{
  float:right;
}

我做了一个提琴手here

我试图让另一个div中的div位于右下角

2 个答案: