css設(shè)計并排布局

番茄西紅柿發(fā)布于2019-04-23 13:26 / 1282人閱讀

摘要：用戶名新密碼請輸入您的新密碼確認密碼請再次輸入您的新密碼以進行確認確認修改效果如下

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="">
    <input type="hidden" name="uname" id="uname" value="">
    <ul>
        <li>li>
        <li> 用戶名li>
        <li><input class="form-control" type="text" value=""
            placeholder="" autocomplete="off" disabled />li>
    ul>

    <ul>
        <li>li>
        <li> 新密碼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>

效果如下

GPU云服務(wù)器云服務(wù)器 css兩個div并排 css布局 css布局教程學(xué)習(xí)css布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1863.html

相關(guān)文章

前端入門4-CSS屬性樣式表

摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規(guī)則層疊算法等之后，那么該來學(xué)習(xí)的也就是都支持哪些屬性樣式表了。本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨家發(fā)布聲明本系列文章內(nèi)容全部梳理自以下四個來源：《HTML5權(quán)威指南》《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入...

hss01248 2019-04-23 13:14 評論0 收藏0
【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（4）布局與定位介紹

摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設(shè)置屬性，兩個內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。寫在前面：作為一個剛開始寫技術(shù)博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點慢，因為同時在做freecodecamp上的題，所以節(jié)奏有點...

nevermind 2019-08-30 15:53 評論0 收藏0
css實現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。今天在工作中遇到了一個問題：有三個div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。我第一時間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)...

xuhong 2019-08-28 18:21 評論0 收藏0
css實現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

摘要：今天在工作中遇到了一個問題有三個塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會打亂的加載順序，還有就是間距是不固定的，并且加了，可能會有副作用。今天在工作中遇到了一個問題：有三個div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。我第一時間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)...

anyway 2019-08-01 14:56 評論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內(nèi)聯(lián)元素，它默認的值為和值是不生效的。然而，如果我們將這個內(nèi)聯(lián)元素設(shè)置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評論0 收藏0