位置问题：应用时绝对

Question

我正在尝试在选项顶部创建一个带有白条的导航栏，但是位置：绝对没有像我预期的那样响应，即使我将它放在一个位置之后：相对，白条比宽度更宽选项的宽度：As you can see here

这是我在教程中关注的代码，感谢您的帮助。

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding: 40px;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: black;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100%;
}

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 1

您的订单项元素比链接元素宽，这意味着您的白条会复制相对定位的订单项的宽度。如果您查看检查员，您可以清楚地看到这一点。

The width

在您的链接上使用border-top属性。

nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {

}

Answer 2

在nav a:before：

如果要创建与文本相同的宽度 - 减去填充：

width: calc(100% - 80px);

或者您想要将其放置与您使用的物品相同的尺寸：

left: 0;

Answer 3

您必须考虑已添加到li元素的40px * 2 = 80 px填充。

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding: 40px;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: black;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  width: calc(100% - 80px);
}

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 4

实现相同目标的另一种方法：

如果您需要的是边框宽度与选项的长度相等，则可以使用属性border-top和padding-top来实现相同的功能，而不是使用伪元素。

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding: 40px;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
  border-top:5px solid #fff;
  padding-top:10px;
}

nav a:hover {
  color: black;
}
/*
nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100%;
}*/

＆＃13;

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;

这是另一种方法，如果您需要所有边框的宽度相同。您必须为伪元素赋予固定宽度，而不是100%。

＆＃13;

＆＃13;

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding: 40px;
  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: black;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  /*width: 100%;*/
  width: 100px;
}

＆＃13;

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 5

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  /*delete padding */
  margin-left: 70px;
  position: relative;  
}

nav a {
  color: white;
  text-decoration: none;
  /*add this */
  padding: 40px 0;
  display: inline-block;
  border-top: 5px solid transparent;
}

nav a:hover {
  color: black;
  /*and this*/
  border-top: 5px solid white;
}

/*
nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100px;
}
*/

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 6

nav a :: before伪元素是:: before的子元素。像:: before或:: hover这样的伪元素总是其选择器前面的元素的子元素。您需要将位置：相对属性放在nav a的规则上。目前，您在li元素上具有position：relative属性，它比a元素宽。

您还需要添加一些其他属性来提升该行。我添加了padding-top来解决这个问题。

body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  font-weight: 400;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #151515;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding: 40px;
  position: relative;
}

nav a {
  position: relative;
  padding-top: 20px;
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: black;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100%;
}

<header>
  <div class="container">
    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">REGISTRATE</a></li>
        <li><a href="#">INGRESAR</a></li>
      </ul>
    </nav>
  </div>
</header>