使用text-justify 和 display:inline-block;实现两端对齐的解决方案

作者：我家自动化 | 2024-03-23 14:19:44

踩

display fix 两侧对齐

display:inline-block列表布局

必要条件：

1：现代浏览器下的首尾标签留空或换行

像这样：

2：IE6/7浏览器

inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。

结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。应该是这个样子滴：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
    <span>描述</span></span>

注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。

总结如下：

各个浏览器实现text-align:justify下的两端对齐布局注意事项表
IE6 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE7 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE8 列表元素间换行或留空、列表元素的环境字体大小不能为0
现代浏览器列表元素间换行或留空

然后样式这样设置，外层元素的样式：text-align:justify;列表元素的样式：display:inline-block;

以下是demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-jusyify下的inline-block自适应列表布局末行对齐修复</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
* {
font-size:12px;
}
.box {
width:50%;
padding:20px;
margin:0 auto;
background-color:#f0f3f9;
text-align:justify;
}
.list {
width:120px;
display:inline-block;
padding-bottom:20px;
text-align:center;
vertical-align:top;
}
.justify_fix {
display:inline-block;
width:100%;
height:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="main">
<div id="body" class="light">
    <div id="content" class="show">
      <div class="demo">
        <div class="box"> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
          哇哦，美女，口水，鼻血~~~</span> <span class="justify_fix"></span> </div>
      </div>
    </div>
</div>
</div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/295693