在进行 html 结构布局之时,常用到的一种布局结构就是左右结构,比如注册表单之类的(左边标题,右边是表单控件),还比如常用的1:2:1的结构布局。这些情况下,我们常希望是左(或右)固定,而右(或左)能根据父元素的宽度自适应。

像这种结构的,如果是固定布局那直接两边都固定宽度然后 float 一下也就是很简单的,不过我们现在是要根据父元素的宽度自适应。好了,切入正题,上代码:

HTML结构如下:

<ul>
    <li class="item">
        <label class="item-title" for="">邮箱:</label>
        <div class="item-con">
            <input class="input" placeholder="常用邮箱" type="text" />
            <p class="tips-text">6~18个字符,可使用字母、数字、下划线,需以字母开头</p>
        </div>
    </li>
    <li class="item">
        <label class="item-title" for="">密码:</label>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">6~16个字符,区分大小写</p>
        </div>
    </li>
    <li class="item">
        <label class="item-title" for="">确认密码:</label>
        <div class="item-con">
            <input class="input" type="text" />
            <p class="tips-text">请再次填写密码</p>
        </div>
    </li>
</ul>

display: table-cell 模拟 tableIE67不支持

CSS:

    .item {
        display: table;
    }
    .item-title {
        width: 100px;
        text-align: right;
        display: table-cell;
    }
    .item-con {
        display: table-cell;
        padding-left: 5px;
    }

显示效果:

  • 6~16个字符,区分大小写

  • 请再次填写密码


左侧标题 float:left,右侧控件 margin-left

CSS:

    .item1 {
        overflow: hidden;
    }
    .item-title1 {
        width: 100px;
        text-align: right;
        float: left;
    }
    .item-con1 {
        margin-left: 100px;
        padding-left: 5px;
    }

显示效果:

  • 6~16个字符,区分大小写

  • 请再次填写密码


左侧标题float:left,右侧控件overflow: hidden;

CSS:

    .item2 {
        overflow: hidden;
    }
    .item-title2 {
        width: 100px;
        text-align: right;
        float: left;
    }
    .item-con2 {
        padding-left: 5px;
        overflow: hidden;
        zoom: 1; /* for ie67*/
    }

显示效果:

  • 6~16个字符,区分大小写

  • 请再次填写密码


定位

CSS:

    .item3 {
        position: relative;
    }
    .item-title3 {
        width: 100px;
        text-align: right;
        position: absolute;
        left: 0;
        top: 0;
    }
    .item-con3 {
        padding-left: 5px;
        margin-left: 100px;
    }

显示效果:

  • 6~16个字符,区分大小写

  • 请再次填写密码