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%;    
}

问题是我希望链接和|分开，但是有多个单词的链接我想要一个常规空格（我希望“等等”有一个标准空间，但是“blah | foo”中的空格拥有更大的空间）。这可能吗？

Answer 1

简单。尝试

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

您单独定位父母和孩子。

Answer 2

你可以这样做，但从你的代码判断，这样做可能更简单，因为你不希望锚点合理。：

<div id="nav1">
  <div class="justify">Your text here.</div>
  <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>

Answer 3

我最终使用 来阻止我不想增长的空间。

防止<a> from inheriting text-align: justified?</a>

3 个答案: