對齊類同組一個類

Question

image 1

我想設置類第一個右邊的類第二conatining形式。我想保留在以下的表單中的第一個類請分享您的經驗。我可以做到這一點使用餘裕和保證金right.How使用浮動或任何其他方式實現這一點。

body, select, input, textarea, button, h1, h2, h3, h4, h5, h6 { 
 
    font-family: Hind; 
 
    line-height: 1.2; 
 
} 
 

 
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], textarea { 
 
    
 
    margin-left: 0px; 
 
} 
 

 
input:focus { 
 
    outline: none !important; 
 
    border:1px solid green; 
 
    box-shadow: 0 0 10px #719ECE; 
 
} 
 
textarea:focus { 
 
     outline: none !important; 
 
    border:1px solid red; 
 
    box-shadow: 0 0 10px #719ECE; 
 
} 
 
#exitpopup-modal .modal-body { 
 
    padding:0px; 
 
} 
 
.modal-body { 
 
    
 
    padding: 0px; 
 
} 
 
.first 
 
{ 
 
margin-left:12%;} 
 
.second img { 
 
    width: 369px; 
 
    height: 404.6px; 
 
    margin-top: -1%; 
 
} 
 
.second form{ 
 
display:table; 
 
margin-left: 37px; 
 
margin-top: 29px; 
 
    
 
} 
 
.row1{ 
 
\t 
 
\t font-size: 10px; 
 
    font-family: inherit; 
 
    display: table-row; 
 
border: 2px solid red; 
 
} 
 
.row1 #name,#mail,#contact{ 
 
    
 
    
 
    color:black; 
 
\t width: 260px; 
 
\t height: 34px; 
 
    padding: 6px 12px; 
 
    border-radius:3.9px; 
 
    border-color: #777; 
 
display:table-cell; 
 
} 
 
.row1 textarea{ 
 
\t \t width: 260px; 
 
\t \t height: 110px; 
 
       color:black; 
 
       border-color: #777; 
 
display:table-cell; 
 
} 
 
.row1 #submit{ 
 
width:152px; 
 
height: 44px; 
 
margin-left:15%; 
 
background-color:#337ab7; 
 
color:white; 
 
border-color:none; 
 
} 
 
.row1 #submit:hover{ 
 
width:152px; 
 
height: 44px; 
 
margin-left:15%; 
 
background-color:white; 
 
color:#337ab7; 
 
border-color:none; 
 
} 
 
.second,.first{ 
 
    float: left; 
 
} 
 
.clearfix{ 
 
    clear:both 
 
} 
 
.titan{ 
 
text-align:center; 
 
font-family: inherit; 
 
font-size: 20px; 
 
padding-top: 38px; 
 
}

<div class="second"> 
 
    <form id="form" name="theform" action="javascript:myformsubmit()"> 
 

 
    <div class="row1"> 
 

 
<input id="name" type="text" placeholder="Your name *" required><br><br> 
 
</div> 
 
    <div class="row1"> 
 

 
<input type="email" id="mail" placeholder="Your email *" required><br><br> 
 
</div> 
 
    <div class="row1"> 
 

 
<input id="contact" type="number" placeholder="Your phonenumber*" required><br><br> 
 
</div> 
 
    <div class="row1"> 
 
    
 
<textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea><br><br> 
 

 
</div> 
 
<div class="first"> 
 
    <input type="radio" name="experience" value="I am happy and purchased/will purchase" checked> I am happy and purchased/will purchase<br> 
 
    <input type="radio" name="experience" value="You are not selling in my city"> You are not selling in my city<br> 
 
    <input type="radio" name="experience" value="You do not have the product i am looking for"> You do not have the product i am looking for<br> 
 
    <input type="radio" name="experience" value="I find your prices higher than market"> I find your prices higher than market<br> 
 
</div> 
 

 

 
    <div class="row1"> 
 

 
<input id="submit" type="submit" value="Submit" > 
 
</div> 
 

 
</form> 
 
    </div> 
 

 

 
<div class="titan">Please share your experience </div> 
 

 
<div class="clearfix"></div> \t \t \t

Answer 1

更新jsfiddle。當你在小屏幕時，你應該使用@media查詢來改變你的input寬度，它甚至可以在移動屏幕上工作。

#form , .first{ 
    display:inline-block; 
} 
.first{ 
    float:right; 
    margin:25px; 
}