zoukankan      html  css  js  c++  java
  • 基于div表单模拟右对齐

    基于div表单模拟右对齐

    ---------------------------------------------------------

    ----------------------------------------------------------

    <div>
    <label>客户名称客户名称</label>
    <input type="text" />
    <div class="button">取消</div>
    </div>

    近期项目中遇到这样布局的表单结构,只能从现有基础上,进行样式修改
    需要:label宽度自适应,右对齐;button按钮紧紧贴着input输入框

    现摘出项目结构部分,模仿表单,如下
    --------------html----------------
    <div>
    <label>客户名称客户名称</label>
    <input type="text" />
    <div class="button">取消</div>
    </div>
    --------------html----------------

    --------------css----------------
    .box {
    80%;
    margin: 0 auto;
    padding: 20px 0;
    border: 1px #000 solid;
    position: relative;
    }

    .box:after {
    content: "";
    display: block;
    clear: both;
    }

    .box div {
    float: left;
    50%;
    padding: 10px 0;
    height: 50px;
    position: relative;
    }

    .box div .button {
    50px;
    display: inline-block;
    position: absolute;
    }

    .box input,
    .box select {
    margin: 0 20px;
    }

    .box div label {
    display: inline-block;
    text-align: right;
    50%;
    white-space: nowrap;
    }
    --------------css----------------
    如果按钮是button,就直接在一行显示了
    这里考虑到,项目中是用的是div模拟的按钮,所以给 .button{position: absolute;},记得给父元素设置position: relative;

    也可以使用 display: table-row;display: table-cell模拟单元格td进行对齐

    详情相关可见附件

     下载地址: http://files.cnblogs.com/files/leshao/right%E5%AF%B9%E9%BD%90.rar

    感谢:雨安合一,lost等朋友思维碰撞得以完善

  • 相关阅读:
    MVC模式的学生信息增删改查
    常用排序算法
    2803 爱丽丝·玛格特罗依德
    3118 高精度练习之除法
    中秋练习题
    poj2011
    P1558 色板游戏
    P1830 轰炸III
    P1656 炸铁路
    1067 机器翻译
  • 原文地址:https://www.cnblogs.com/leshao/p/6055469.html
Copyright © 2011-2022 走看看