为什么这个文本对齐:合理的工作? [英] Why doesn't this text-align:justified work?
问题描述
我面临的问题是,在 div
中有 text-align:justified;
一组 a
元素,其中 text-align:justified
是不工作。所以我写了一个SSCCE来演示这个问题,但令我感到惊讶和沮丧的是,它在SSCCE中工作。
我已经使用了我所有的大脑力量,使SSCCE尽可能与原始代码相似,在这一点上它们是相同的。所以我发布的两个页面的屏幕截图,还有代码。
部分原创网站:
a href =https://i.stack.imgur.com/M0zfa.png =nofollow noreferrer>
以下标记来自.php文件,此< section& 具有
未设置位置或显示属性,但具有< div>
display:table; 和几个同级< section>
元素,每个都有 position:relative
。这些是< div>
的子项,它也有 position:relative
$ c>< body> height:100%
。
< section class =body-wrapper full-width>
< div class =everything-wrapper fixed-width>
< p class =desc-para> Lorem Ipsum一直是业界标准的虚拟文本,自从1500年代,当一个未知的打印机采取类型的厨房,并加扰它做一个类型的标本书。 ; / p>
< div class =links-wrapper>
<?php // $ num = 1;
foreach($ links as $ a_link){
echo'< a class =a-linkhref ='。$ a_link-> the_url。'target =_ blank> ';
echo'< div class =image-replace-divstyle =background-image:url(pix / colours.png); background-repeat:no-repeat; background-position:center center; 。 >';
echo'just a link';
echo'< / div>';
echo'< p class =caption>那些天使眼睛< / 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;背景颜色: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:gray; border:coral 6px solid;}。caption {font-family:sans-serif; font-size:14px; padding-top:20px; text-align:center;颜色:白色; 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一直是业界标准的虚拟文本,自从1500年代,当一个未知的打印机采取类型的厨房,并加扰它制作一个类型的标本书。 < div class =links-wrapper> < a class =a-linkhref =#> < div class =the-divstyle =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-linkhref =#> < div class =the-divstyle =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-linkhref =#> < div class =the-divstyle =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-linkhref =#> < div class =the-divstyle =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-linkhref =#> < div class =the-divstyle =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>扼杀者牧马人< / p> < / a> < a class =a-linkhref =#> < div class =the-divstyle =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 - >
/ div>
可能的问题是,在你的代码中, a
元素,而在SSCCE中有一些。 text-align:justify
通过加宽空格来工作,所以如果没有空格,它不会发生
The problem I am facing is that inside a div
having text-align:justified;
, there is a bunch of a
elements, on which the text-align:justified
is Not working. So I wrote an SSCCE to demonstrate the problem, but to my surprise and frustration, it does work in the SSCCE.
I have used all my brain power to make the SSCCE as similar to the original code as possible, and they are like equivalent at this point. So I am posting the screenshots of both the pages, and also the code.
PART OF ORIGINAL WEBSITE:
The following mark-up is from the .php file, and this <section>
has a <div>
which has position:relative; display:table;
and a few sibling <section>
elements, each of which has position:relative
. These are children of a <div>
which also has position:relative
, which is a child of <body>
which doesn't have position or display property set, but has 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: I copied and pasted the CSS to the SSCCE, so you can find it below in the code-editor; I am not posting it here because that would make the question longer for no good reason.
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 -->
Probably, the problem is that in your live code you have no white space between the a
elements, while in the SSCCE there are some. text-align:justify
works by widening the white spaces, so if there are no white spaces it can't happen
这篇关于为什么这个文本对齐:合理的工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!