为什么这个 text-align:justified 不起作用?
Why doesn't this text-align:justified work?
我面临的问题是,在具有 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 -->
问题可能是在您的实时代码中 a
元素之间没有白色 space,而在 SSCCE 中有一些。 text-align:justify
通过加宽白色 spaces 来工作,所以如果没有白色 spaces 它就不会发生
我面临的问题是,在具有 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 -->
问题可能是在您的实时代码中 a
元素之间没有白色 space,而在 SSCCE 中有一些。 text-align:justify
通过加宽白色 spaces 来工作,所以如果没有白色 spaces 它就不会发生