为什么这个 text-align:justified 不起作用？

Question

我面临的问题是，在具有 text-align:justified; 的 div 中，有一堆 a 元素，text-align:justified 在这些元素上不起作用。所以我写了一个 SSCCE 来演示这个问题，但令我惊讶和沮丧的是，它在 SSCCE 中确实有效。

为了让SSCCE和原代码尽可能的相似，我费了九牛二虎之力，在这一点上它们是等价的。所以我发布了这两个页面的屏幕截图以及代码。

原始网站的一部分：

以下标记来自 .php 文件，此 <section> 有一个 <div>，其中有 position:relative; display:table; 和一些同级 <section> 元素，每个元素有 position:relative。这些是 <div> 的子项，它也有 position:relative，它是 <body> 的子项，没有设置位置或显示属性，但有 height:100%.

<section class="body-wrapper full-width">
    <div class="everything-wrapper fixed-width">
        <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <div class="links-wrapper">
            <?php //$num=1;
                foreach ($links as $a_link) {
                    echo '<a class="a-link" href="' . $a_link->the_url . '" target="_blank">';
                        echo '<div class="image-replace the-div" style="background-image:url(pix/colours.png); background-repeat:no-repeat; background-position:center center;"  >';
                            echo 'just a link';
                        echo '</div>';
                        echo '<p class="caption">Those angel eyes</p>';
                    echo '</a>';
                }
            ?>
        </div><!-- .links-wrapper -->
    </div><!-- .everything-wrapper -->
</section>

CSS: 我将 CSS 复制并粘贴到 SSCCE，因此您可以在下面的代码编辑器中找到它；我不会在这里发布它，因为那样会使问题无缘无故地变长。

SSCCE:

article, aside, figure, footer, header, hgroup, nav, section, details, summary {
    display: block;
}


section.body-wrapper {
 position:relative;
 background-color:teal;
 width:100%;
 min-width:960px;
}

div.fixed-width {
 width:960px;
 margin-left:auto;
 margin-right:auto;
 padding:0px 10px;
}

.everything-wrapper p.desc-para {
 font-size:18px;
 width:460px;
 margin:0 auto;
 padding:40px 0px 27px;
}

div.links-wrapper {
 background-color:black;
 padding: 20px 0px 50px;
 text-align:justify;
}
div.links-wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}

.a-link {
 display:inline-block;
 text-decoration:none;
}

div.the-div {
 font: 0px/0 a;
 border: coral 2px solid;
 height:140px;
 width:140px;
 transition: all 0.3s ease 0s
}

.the-div:hover {
 background-color:grey;
 border: coral 6px solid;
}

.caption {
 font-family:sans-serif;
 font-size:14px;
 padding-top:20px;
 text-align:center;
 color:white;
 font-weight:100;
 transition: all 0.3s ease 0s;
}
.caption:hover {
 color:cyan;
 font-weight:200;
}

<section class="body-wrapper">



 <div class="everything-wrapper fixed-width">
  <p class="desc-para">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

  <div class="links-wrapper">

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

   <a class="a-link" href="#">
    <div class="the-div" style="background-image:url(http://www.monitoryourheart.com/wcm/groups/mdtcom_sg/@mdt/@crdm/documents/images/icon-mri-50px.gif); background-repeat:no-repeat; background-position:center center;">Bulb</div>
    <p class="caption">Strangler Wrangler</p>
   </a>

  </div> <!-- .links-wrapper -->

 </div> <!-- .everything-wrapper -->



</section><!-- .body-wrapper -->

Answer 1

问题可能是在您的实时代码中 a 元素之间没有白色 space，而在 SSCCE 中有一些。 text-align:justify 通过加宽白色 spaces 来工作，所以如果没有白色 spaces 它就不会发生

为什么这个 text-align:justified 不起作用？

Why doesn't this text-align:justified work?

html

css

anchor

text-align