一个显示对齐的问题补充

yaotomo 2018-02-14 01:49:52

前几天在论坛上问了一个CSS显示两端对齐的方法，效果如下

有老师给出了如下的实现方法



<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title> 页面名称 </title>

<style type="text/css">

.list, .l , .r {

    background-color: #fff;

}

.list li {

    position: relative;

    z-index: 0;

}

.l {

    float: left;

    padding-right: 3px;

}

.r {

    float: right;

    padding-left: 3px;

}

.list li:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 13px;

    z-index: -1;

    border-bottom: 2px dotted #000;

}

</style>

</head>

<body>

<ul class="list">

    <li><div class="l">1. aaaaaaaaaaaaa</div><div class="r">1234</div></li>

    <li><div class="l">2. bbbbbbbbb</div><div class="r">14</div></li>

    <li><div class="l">3. ccccccccccccccccccccccc</div><div class="r">456514</div></li>

</ul>

</body>

</html>

上面的代码利用了边框和显示层级关系实现了上图的效果
但是当我使用jquery的插件jqprint打印这个列表的时候，由于只是打印的它的html元素，不分z-index层级
导致下面的打印效果，请教应该怎么解决呢？
是不是不能用上面的css代码了？

...全文

1214 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

yaotomo 2018-02-23

打赏
举报

引用 1 楼 jslang 的回复:



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.list li {
	display: table;
}
.l, .r {
	display: table-cell;
	white-space: nowrap;
}
.v {
    width: 100%;
	display: table-cell;
	position: relative;
	top: -3px;
    border-bottom: 2px dotted #000;
}
</style>
</head>
<body>
<ul class="list">
    <li><div class="l">1. aaaaaaaaaaaaa</div><div class="v"></div><div class="r">1234</div></li>
    <li><div class="l">2. bbbbbbbbb</div><div class="v"></div><div class="r">14</div></li>
    <li><div class="l">3. ccccccccccccccccccccccc</div><div class="v"></div><div class="r">456514</div></li>
</ul>
</body>
</html>

感谢！

yaotomo 2018-02-23

打赏
举报

引用 2 楼 hf872914334 的回复:

可以使用flex布局，每个li分左中右三部分

弹性布局对浏览器要求太高了，好像只有IE11才支持

hfhan_872914334 2018-02-22

打赏
举报

可以使用flex布局，每个li分左中右三部分

天际的海浪 2018-02-14

打赏
举报



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.list li {
	display: table;
}
.l, .r {
	display: table-cell;
	white-space: nowrap;
}
.v {
    width: 100%;
	display: table-cell;
	position: relative;
	top: -3px;
    border-bottom: 2px dotted #000;
}
</style>
</head>
<body>
<ul class="list">
    <li><div class="l">1. aaaaaaaaaaaaa</div><div class="v"></div><div class="r">1234</div></li>
    <li><div class="l">2. bbbbbbbbb</div><div class="v"></div><div class="r">14</div></li>
    <li><div class="l">3. ccccccccccccccccccccccc</div><div class="v"></div><div class="r">456514</div></li>
</ul>
</body>
</html>