html 左边任意宽度，右边撑满；_html 铺满右侧页面-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47165403/article/details/132487154

一、效果

二、方法1（左边向左悬浮，右边百分百）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            width: 500px;
            margin: auto;
            border: 1px solid;
            padding: 1rem;
        }
        .father{
            margin: 1rem;

        }
        .left{
            float: left;
            border-bottom: 1px solid white;
        }
        .right{
            border-bottom: 1px solid black;
             width: 100%;
        }

    </style>
</head>

<body>
<div id="main">
    <div class="father">
        <div class="left">姓名：</div>
        <div class="right">&nbsp;</div>
    </div>
    <div class="father">
        <div class="left">身份证号码：</div>
        <div class="right">&nbsp;</div>
    </div>
</div>
</body>
</html>

三、方法2（父层用display: flex; 右边用flex: 1;）

这种语法有些第三方网页转pdf不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            width: 500px;
            margin: auto;
            border: 1px solid;
            padding: 1rem;
        }
        .father{
            margin: 1rem;
            display: flex;
        }
        .right{
            border-bottom: 1px solid black;
            flex: 1;
        }

    </style>
</head>

<body>
<div id="main">
    <div class="father">
        <div class="left">姓名：</div>
        <div class="right">&nbsp;</div>
    </div>
    <div class="father">
        <div class="left">身份证号码：</div>
        <div class="right">&nbsp;</div>
    </div>
</div>
</body>
</html>