html样式中左右两边的文字宽度不固定,怎么在中间添加一条中间线 5

 我来答
俄不擦肩而过
2018-01-31 · TA获得超过144个赞
知道小有建树答主
回答量:113
采纳率:100%
帮助的人:52.1万
展开全部

借用了一下@能躺绝不Carrys 的代码,在他的代码下改良了下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 .main-body li {
            display: flex;
 }
        .main-body li label {
            margin: 0;
 margin-right: 10px;
 }
        .main-body li span {
            flex: 1;
 position: relative;
 }
        .main-body li span:after {
            display:inline-block;
 content: '';
 position: absolute;
 right:0;
 left:0;
 height: 1px;
 top: 50%;
 margin-top:-1px;
 border-bottom: 2px dotted #000;
 }
    </style>
</head>
<body>
<div class="main-body">
    <li>
        <label>2017.12.29</label>
 报名工作温馨提示
        <span></span>
 12312312
    </li>
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
帐号已注销
2018-01-31 · 超过29用户采纳过TA的回答
知道答主
回答量:89
采纳率:81%
帮助的人:13.3万
展开全部

html:

<div class="main-body">
    <li>
<label>2017.12.29</label>
<span>报名工作温馨提示</span>
    </li>
</div>

css:

.main-body li {
display: flex;
}
.main-body li label {
margin: 0;
margin-right: 10px;
}
.main-body li span {
    flex: 1;
    position: relative;
}
.main-body li span:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    margin-left: 10px;
    border-bottom: 1px dotted #000;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
乖乖猫nini
2018-01-31 · TA获得超过176个赞
知道答主
回答量:98
采纳率:83%
帮助的人:17.2万
展开全部
这个应该是确定一行有多少个字L,len个点占一个字,然后用一行的字减去显示出来的字nLen在乘以以几个点占一个字 (L-nLen)*len
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式