Padding在最后一个孩子身上不会消失

Question

我正在尝试制作导航菜单，并且我正在使用:after，:before，:last-child。我最后一个孩子的填充物似乎没有摆脱。我在链接中添加了红色背景，因此很容易理解。我想要的只是链接周围的填充

＆＃13;

＆＃13;

.content-nav {
  height: ;
  width: ;
  background: ;
  text-align: center;
  padding: 10pt
}

.content-nav a {
  color: #000;
  padding: ;
  text-decoration: none;
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  background: red
}

.content-nav a:after {
  content: " + ";
  padding: 0 5pt 0 5pt;
  color: rgb(246, 22, 66)
}

div.content-nav a:last-child:after {
  content: "";
}

＆＃13;

<div class="content-nav">
  <h1>Navigate the site</h1>
  <a href="company.php" title="Company - (About Us, Projects)">company</a>
  <a href="careers.php" title="Job Openings">careers</a>
  <a href="contact.php" title="Contact Us">contact</a>
  <a href="contact.php" title="Refer to Contact Page">support</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢任何帮助。

Answer 1

您需要将填充显式设置为0：

div.content-nav a:last-child:after {
  content: "";
  padding: 0 0 0 5pt;
}

Answer 2

将padding-right: 0;添加到div.content-nav a:last-child:after

.content-nav {
  height: ;
  width: ;
  background: ;
  text-align: center;
  padding: 10pt
}

.content-nav a {
  color: #000;
  padding: ;
  text-decoration: none;
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  background: red
}

.content-nav a:after {
  content: " + ";
  padding: 0 5pt 0 5pt;
  color: rgb(246, 22, 66)
}

div.content-nav a:last-child:after {
  content: "";
  padding-right: 0;
}

<div class="content-nav">
  <h1>Navigate the site</h1>
  <a href="company.php" title="Company - (About Us, Projects)">company</a>
  <a href="careers.php" title="Job Openings">careers</a>
  <a href="contact.php" title="Contact Us">contact</a>
  <a href="contact.php" title="Refer to Contact Page">support</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
</div>

Answer 3

为你的CSS添加填充：0pt。

.content-nav {
  height: ;
  width: ;
  background: ;
  text-align: center;
  padding: 10pt
}

.content-nav a {
  color: #000;
  padding: ;
  text-decoration: none;
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  background: red
}

.content-nav a:after {
  content: " + ";
  padding: 0 5pt 0 5pt;
  color: rgb(246, 22, 66)
}

div.content-nav a:last-child:after {
  content: "";
  padding: 0pt
}

<div class="content-nav">
  <h1>Navigate the site</h1>
  <a href="company.php" title="Company - (About Us, Projects)">company</a>
  <a href="careers.php" title="Job Openings">careers</a>
  <a href="contact.php" title="Contact Us">contact</a>
  <a href="contact.php" title="Refer to Contact Page">support</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
</div>

Answer 4

你需要适当的选择器.content-nav a:last-child:after 见下面的代码

.content-nav a:last-child:after {
    padding: 0;
}

https://jsfiddle.net/v2vd92rz/

Answer 5

我刚删除了最后一个元素的填充...我希望这就是你要找的东西：）

＆＃13;

＆＃13;

.content-nav {
  height: ;
  width: ;
  background: ;
  text-align: center;
  padding: 10pt
}

.content-nav a {
  color: #000;
  padding: ;
  text-decoration: none;
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  background: red
}

.content-nav a:after {
  content: " + ";
  padding: 0 5pt 0 5pt;
  color: rgb(246, 22, 66)
}

div.content-nav a:last-child:after {
  content: "";
  padding: 0;
}

＆＃13;

<div class="content-nav">
  <h1>Navigate the site</h1>
  <a href="company.php" title="Company - (About Us, Projects)">company</a>
  <a href="careers.php" title="Job Openings">careers</a>
  <a href="contact.php" title="Contact Us">contact</a>
  <a href="contact.php" title="Refer to Contact Page">support</a>
  <a href="#">Hello</a>
  <a href="#">Hello</a>
</div>

＆＃13;

＆＃13;

＆＃13;