2016-03-25 14 views
0

Ben bir acemi, sinir bozucu bir problem yaşıyorum. Diğer alanlarla aynı veya benzer betik kullanıyor olsalar bile, metin alanımın 8'inden 2'si sola kaymıyor.Alanlar soldan kalamıyor

enter image description here

/*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="[email protected]" 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'ler formları css çalışmalarında kırmızı kutu tek yoldur sarılmış, ben de görmek onları kaldırdık: Aşağıda görebileceğiniz gibi, çok sinir bozucu onlar problemin sebebi ise ve garip değillerse. Bu

numaralı sorunu çözmek için neler yapabilirim?
+0

'' 'clear''' öğrenin: https://developer.mozilla.org/en-US/docs/Web/CSS/clear – marcelo2605

+0

div içine koyun. Çalışabilir. – osmanraifgunes

cevap

1

Herkese sahip olmak istediğiniz metin kutularını sola hizalamak istiyorsanız, solda değil. Örnek görüntüye bakıldığında, düzgün bir şekilde sola dönen görünen iki öğe, soldan kaydırılan 2'dir. Tüm sol bayileri css'nizden kaldırmayı ve gövde metin hizalama özelliğini sola döndürmeyi deneyin.

body { 
    text-align: left; 
} 
+0

ben bir float ekledim, ama sadece bir kayan ekledi: sol; tüm formu saran bir div'a. çok teşekkür ederim – jerneva

1

Diğer tüm girişler bir DIV öğesine sarılır - gerisini DIV'ye de sarın ve çalışmalıdır.

+0

div elemanları css'nin çalışmasının tek yoludur. onun üzerinde bir adam tarafından önerildi, ben de aynı zamanda düşündüğüm gibi tüm divs sildim ama – jerneva