移动端 样式适配问题

clipboard.png
样式为iphone6,7,8,plus下的样式

clipboard.png
样式为iphone6,7,8 下的样式

不知道怎么样才可以在不同的手机上显示时,,文字都是对齐的
这个样式改了好几天,脑子里想不出来有什么好的办法可以妥善解决,去百度
请问大家都有什么好的想法吗

阅读 1.1k
评论 2018-08-16 提问
    4 个回答

    这个属于html划分和css搭配的问题

    按照 与员工关系 选择 icon>
    这一行来讲
    宽度使用百分比布局,搭配text-align来实现
    |40%|40%|20%|
    前两个text-align:left
    后一个text-align:right

    评论 赞赏

      首先查看是否受其他样式影响导致的,第二你应该用rem布局,可以看看有没有padding,margin影响,实在不行,用float:left;然后再设置一下padding就好了。

      评论 赞赏
        chztv
        • 49

        使用flex,保证不存在不能对齐的问题
        第二,为保证在各种手机上显示效果基本一致,最好全部使用rem,不要夹杂px的单位大小。

        评论 赞赏
          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>布局</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1">
            <style type="text/css">
            *{padding:0;margin:0;}
            .form{padding:0 5%;}
            .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ccc;}
            .row .field{flex-grow:0;width:100px;}
            .row .right{flex-grow:1;}
            .row .right{display:flex;align-items:center;position:relative;}
            .right .icon{flex-grow:0;flex-shrink:0;}
            .icon-right{display:inline-block;width:10px;height:10px;border:1px solid #ccc;border-width:0 1px 1px 0;transform:rotate(-45deg);position:relative;margin-right:2px;}
            input{outline:none;border:none;flex-grow: 1;}
            </style>
          </head>
          <body>
            <div class="form">
              <div class="row">
                <div class="field">与员工关系</div>
                <div class="right has-icon">
                  <input type="text" placeholder="请输入姓名">
                  <div class="icon">
                    <span class="icon-right"></span>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="field">姓名</div>
                <div class="right">
                  <input type="text" placeholder="请输入姓名">
                </div>
              </div>
            </div>
          </body>
          </html>

          基本思路是用flex, 可以定宽的flex-grow为0,需要自增长的flex-grow为1

          评论 赞赏
            撰写回答

            登录后参与交流、获取后续更新提醒