0
私は初心者です、私はイライラする問題があります。私のテキストフィールドのうちの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="[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>
'' 'clear'''について学ぶ：https://developer.mozilla.org/en-US/docs/Web/CSS/clear – marcelo2605
は、divタグ内に置きます。それは動作する可能性があります。 – osmanraifgunes