css设计并排布局

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kai1aa&title=css%E8%AE%BE%E8%AE%A1%E5%B9%B6%E6%8E%92%E5%B8%83%E5%B1%80

css code

form#reset_password ul {
    list-style: none;
    margin: 0 0 20px 200px;
    padding: 0;
}

form#reset_password ul li:first-child {
    display: inline;
    line-height: 34px;
    padding-left: 10px;
}

form#reset_password ul li:nth-child(2) {
    float: left;
    line-height: 34px;
}

form#reset_password ul li:last-child {
    float: left;
}

 

html code

<form id="reset_password">
    <input type="hidden" name="rt" value="<?= $msg['reset_time'] ?>">
    <input type="hidden" name="uname" id="uname" value="<?=$msg['username'];?>">
    <ul>
        <li></li>
        <li>&emsp;用户名</li>
        <li><input class="form-control" type="text" value="<?=$msg['username'];?>"
            placeholder="" autocomplete="off" disabled /></li>
    </ul>

    <ul>
        <li></li>
        <li>&emsp;新密码</li>
        <li><input class="form-control" type="password" name="newpwd" id="newpwd" value=""
            autocomplete="off" placeholder="请输入您的新密码" /></li>
    </ul>

    <ul>
        <li></li>
        <li>确认密码</li>
        <li><input class="form-control" type="password" name="repeat_pwd" id="repeat_pwd" value=""
            autocomplete="off" placeholder="请再次输入您的新密码以进行确认" /></li>
    </ul>
    <p><button id="save_new_pwd" class="btn btn-success">确认修改</button></p>
</form>

效果如下

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=kai1aa&title=css%E8%AE%BE%E8%AE%A1%E5%B9%B6%E6%8E%92%E5%B8%83%E5%B1%80

转载于:https://my.oschina.net/u/4181724/blog/3089809