html - 对齐包含类的类

Question

image 1

我想将第一个类设置在第二个包含 form 的类的右侧。我想在 请分享您的经验 下方的表格中将类(class)放在第一位。我可以使用 margin left 和 margin right 来做到这一点。如何使用 float 或任何其他方式实现此目的。

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{
	
	font-size: 10px;
    font-family: inherit;
     display: table-row;
border: 2px solid red;
}
.row1 #name,#mail,#contact{
    
  
     color:black;
	width: 260px;
	height: 34px;
    padding: 6px 12px;
    border-radius:3.9px;
    border-color: #777;
display:table-cell;
} 
.row1 textarea{
		width: 260px;
		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>			

Answer 1

已更新 jsfiddle .当您在小屏幕上时，您应该使用 @media 查询来更改您的 input 宽度，它甚至可以在移动屏幕上工作。

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