css设计并排布局

番茄西红柿发布于2019-04-23 13:26 / 1100人阅读

摘要：用户名新密码请输入您的新密码确认密码请再次输入您的新密码以进行确认确认修改效果如下

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>

效果如下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1863.html

前端入门4-CSS属性样式表

摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...

hss01248 2019-04-23 13:14 评论0 收藏0
【零基础入门】 css学习笔记（4）布局与定位介绍

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

nevermind 2019-08-30 15:53 评论0 收藏0
css实现左右顶头、宽度自适应的多列、多块并排，多列布局

摘要：今天在工作中遇到了一个问题有三个块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序，还有就是间距是不固定的，并且加了，可能会有副作用。今天在工作中遇到了一个问题：有三个div块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。我第一时间想到的是传统的三列布局，但传统的三列布局都是固定宽度加自适应宽度，从网...

xuhong 2019-08-28 18:21 评论0 收藏0
css实现左右顶头、宽度自适应的多列、多块并排，多列布局

摘要：今天在工作中遇到了一个问题有三个块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序，还有就是间距是不固定的，并且加了，可能会有副作用。今天在工作中遇到了一个问题：有三个div块，里面放置展示内容，并排，中间有间隙，两边顶头，可以随屏幕大小自适应宽度。我第一时间想到的是传统的三列布局，但传统的三列布局都是固定宽度加自适应宽度，从网...

anyway 2019-08-01 14:56 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0