html - 防止 <a> 继承 text-align : justified?

Question

我有以下几组代码:

HTML:

<div id="nav1" class="justify">
  <a href="../blah.php">blah</a> &#x7c; 
  <a href="../foo.php">foo</a> &#x7c; 
  <a href="../bar.php">bar</a> &#x7c; 
  <a href="../blahblah.php">blah blah</a>
</div>

CSS:

.justify
{
   text-align:justify;
}
.justify:after
{
   content: "";
   display: inline-block;
   width: 100%;    
}

问题是我想要链接和 |'s 分开但是有多个单词的链接我想要一个规则的空格(我想要“blah blah”有一个标准空间，但是“blah | foo”中的空格有更大的空间)。这可能吗？

Answer 1

简单。尝试

.justify {
  text-align: justify;
}
  .justify a {
    text-align: left;
  }

您分别定位父项和子项。