Question

我有以下导航方案：

导航栏为红色，其中有一个导航li。蓝色区域是导航按钮的下拉菜单。下拉菜单绝对定位，因此在left: 0元素的左边缘对齐。我想要的是下拉绝对定位，但要在导航栏的左边缘（红色容器）对齐。

我已经尝试了.navigation-bar，但出于某种原因，它在我的方案中无效。是否有任何替代方法可以使其与chown admin:admin -R /home/admin/web/my.exgitrepo.com/public_html/public/对齐？

现在看起来像什么

它需要看起来像什么

Answer 1

尝试应用margin：0和padding：0到ul。

Answer 2

它实际上是li上的填充和边距移动它。

尝试将此添加到.navigation-bar ul li选择器上的css：

padding: 0;
margin: 0;

最终输出：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
  <style>
    body,
    html {
      padding: 0;
      margin: 0;
    }
    
    .navigation-bar {
      width: 100%;
      display: block;
      color: white;
      background-color: red;
    }
    
    .navigation-bar ul li {
      display: inline-block;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    .align-me {
      position: absolute;
      display: block;
      width: 1080px;
      color: white;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="navigation-bar">
    <li>Navigation button</li>
    <div class="align-me">I need to be aligned to .navigation-bar</div>
  </div>
</body>

</html>

＆＃13;

Answer 3

正如pedram在评论中所说，您需要重置margin和padding属性。你可以写ul { margin: 0; padding: 0; }，但是好的做法（我总是使用它）是使用margin选择器重置所有元素的padding和*。编写标记要容易得多：

* {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>

<html>
	<head>
		<title>test</title>
		<style>
			body, html {
				padding: 0;
				margin: 0;
			}
			.navigation-bar {
				width: 100%;
				display: block;
				color: white;
				background-color: red;
			}
			.navigation-bar ul li {
				display: inline-block;
				list-style-type: none;
			}
			.align-me {
				position: absolute;
				display: block;
				width: 1080px;
				color: white;
				background-color: blue;
			}
		</style>
	</head>

	<body>
		<div class="navigation-bar">
			<ul>
				<li>Navigation button</li>
				<div class="align-me">I need to be aligned to .navigation-bar</div>
			</ul>
		</div>
	</body>
</html>

如何将绝对定位元素与父母的父元素对齐

3 个答案: