Mobile terminal style adaptation problem

clipboard.png
iphone6,7,8,plus

clipboard.png
style is the style under iphone6,7,8

when I don"t know how to display it on different phones, the text is all aligned
this style has been changed for several days, and I can"t think of any good way to solve it properly. Do you have any good ideas when you go to Baidu
?

Apr.11,2021

this belongs to the problem of html partition and css collocation

Select the icon >
line according to the relationship with employees. Use the percentage layout of
width, and match it with text-align to achieve
| 40% | 40% | 20% |
the first two text-align:left
the last text-align:right


first check whether it is caused by the influence of other styles, second, you should use rem layout, you can see if there is no impact of padding,margin, really not, use float:left; and then set padding.


use flex, to ensure that there is no problem of misalignment
second, in order to ensure that the display effect is basically the same on all kinds of mobile phones, it is best to use rem, without mixing the unit size of 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 -sharpccc;}
  .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 -sharpccc;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>

the basic idea is that the width flex-grow can be set to 0 with flex, and the flex-grow that needs to be self-growing is 1

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c06ada-3282e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c06ada-3282e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?