html - 字段不会向左浮动

Question

我是新手，遇到了一个令人沮丧的问题。我的 8 个文本字段中有 2 个不会向左浮动，即使它们使用与其他字段相同或相似的脚本。这非常令人沮丧，如下所示:

/*franchise details form container*/
div#section_left{
     padding: 0;
    position:absolute;
    width: 76%;
    height: 100%;
    float: right;
    margin-top: 60px;
    margin-left: 310px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 30px;
   }

div.field{
      position: relative; 
  
     }

     /*Form fields styling*/
     /* red box*/

    div.field,
    div.field:before,
    div.field input#fran_name,
    input#fran_email,input#mang_name,
    input#address1, input#franc_phone{
    height: 33px;
    padding: 0;
    border-width: 0;
    /* remove default border */  
    }

      div.field input#fran_name,
      input#fran_email,input#mang_name,
      input#address1, input#franc_phone{
      border: 1px solid #6d6e70;
      border-left: 0px;
      padding-left: 5px;
      border-radius: 0 5px 5px 0;
      width: 40%;
      margin-bottom: 10px;
      }

     div.field:before{  
     content: "\f015";
     width: 30px;
     height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field1:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field2:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field3:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;    
    }

    div.field4:before{
    content: "\0260E";
    width: 30px;
    height: 30px;
    border: 1px solid #e86065;
    display: inline-block;
    float: left;
    position: relative;
    background: #e86065;
    color: white;
    text-align: center;
    line-height: 33px;
    border-radius: 5px 0 0 5px;  
    margin-top: 55px;
    }

    div.field4 input#franc_phone{
    margin-top: 55px;
    }

    input#address2,input#city {
    border: 1px solid #6d6e70;
    border-radius: 5px;
    width: 43%;
    height: 33px;
    display: inline-block;
    line-height: 33px;
    float: left;
    position: relative;
    margin-bottom: 10px; 
    }

    input#pcode{
    border: 1px solid #6d6e70;
    border-radius: 5px;
    width: 20%;
    height: 33px;
    line-height: 33px;
    float: left;
    position: relative;
    margin-top: 10px; 
    margin-bottom: 10px;
    }

   .clr{
   clear: both;
}

<div id="section_left">
            <form id="franchiseDets" action ="Franchise-Details.php" method="POST">

                <div class="group1">
                    <!--                franchise details form-->
                    <div class="field">

                        <input type="text" name="fran_name" id="fran_name" value="<?php echo $_SESSION['fran_name']; ?>"  placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" 
                               autofocus required tabindex="1"></div>
                    <br>

                    <div class="field1">


                        <input type="email" name="fran_email" id="fran_email" value="<?php echo $_SESSION['fran_email'] ?> ' <?php echo $disabled ?>" placeholder="leeds@one-delivery.co.uk" required tabindex="2">
                    </div>
                    <br>

                    <div class="field2">

                        <input type="text" name="mang_name" id="mang_name" value="<?php echo $_SESSION['mang_name']; ?>" placeholder="Joe Blogs" required tabindex="3">

                    </div>
                    <br>
                    <div class="field3">
                        <input type="text" name="address1" id="address1" value="<?php echo $_SESSION['address1']; ?>" placeholder="Address Line 1" tanindex="4">
                    </div>
                    <br>


                    <input type="text" name="address2" id="address2" value="<?php echo $_SESSION['address2']; ?>" placeholder="Address Line 2" tabindex="5">
                    <br>
                    <br>
                    <input type="text" name="city" id="city"  value="<?php echo $_SESSION['city']; ?>"placeholder="Town/City" tabindex="6">
                    <br>
                    <br>


                    <input type="text" name="pcode" id="pcode"  value="<?php echo $_SESSION['pcode']; ?>"  placeholder="Postcode" tabindex="7">
                    <br>


                    <div class="field4">
                        <input type="tel" name="franc_phone" id="franc_phone"  value="<?php echo $_SESSION['franc_phone'] ?>"  placeholder="Customer service number" min="10" maxlength="11" pattern="[0-9]{3}[-][0-9]{4}[-][0-9]{4}" 
                               required title="Please provide your customer service number in the following format: 000-0000-0000" tabindex="8"> </div>

                </div>
                <br>
                </div>
                </div>
</form>

包裹表格的 div 是 css 中红色框工作的唯一方式，我还删除了它们以查看它们是否是问题的原因，但奇怪的是它们不是。我该怎么做才能解决这个问题

Answer 1

如果您希望所有文本框都在左侧对齐，那不是向左浮动。查看示例图像，仅有的两个看起来正确向左浮动的元素是 2，它们从左侧偏移。尝试从您的 css 中删除所有左侧 float 并将正文文本对齐属性设置为左侧。

body {
    text-align: left;
}