css設計並排佈局

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>

效果以下