难度调整文本框位置

Question

这是我的HTML代码：

<div class="jumbotron text-center"> 
    <h1>Welcome to ShopialMedia</h1> 
</div> 
<h2> Sign up if you haven't already </h2> 
<div ng-controller = "signupController"> 
    <h3> Email : </h3> 
    <input type = "text" placeholder="Enter your Email" ng-model = "userEmail" id ="textEmail" ></input> 
<h4> Password: </h4> 
<input type = "text" placeholder="Enter your password" ng-model = "userPass" id = "textPass"></input> 
<h5> First Name: </h5> 
<input type = "text" placeholder="Enter your First Name" ng-model = "userFName" id = textFname ></input> 
<h6> Last Name : </h6> 
<input type = "text" placeholder="Enter your Last Name" ng-model = "userLName" id = textLname ></input> 
<h7> Age : </h7> 
<input type = "text" placeholder="Enter your Age" ng-model = "userAge" id = textAge ></input> 
<button type = "submit" ng-click="signup()"> Sign Up </button> 
</div> 

实际输出：

我想要的文本框是其相应的标题旁边。

Answer 1

您可以简单地使用display：inline-block;像这样

input{ 
    display:inline-block; 
} 
h3,h4,h5,h6,h7{ 
    display:inline-block; 
} 

见fiddle的结果...

您也可以使用自举做到这一点非常快，使它看起来不错。

编辑：你应该使用标签像其他答案建议，我只是假设你已经把标题元素在那里的原因基于你使用每种类型之一的事实。

Answer 2

尝试使用标签，而不是标题是这样的：

HTML：

<label> Email : </label> 
<input type="text" placeholder="Enter your Email" ng-model="userEmail" id="textEmail"></input> 
<BR> 
<label> Password: </label> 
<input type="text" placeholder="Enter your password" ng-model="userPass" id="textPass"></input> 
<BR> 
<label> First Name: </label> 
<input type="text" placeholder="Enter your First Name" ng-model="userFName" id=t extFname></input> 
<BR> 
<label> Last Name : </label> 
<input type="text" placeholder="Enter your Last Name" ng-model="userLName" id=t extLname></input> 
<BR> 
<label> Age : </label> 
<input type="text" placeholder="Enter your Age" ng-model="userAge" id=t extAge></input> 
<BR> 
<button type="submit" ng-click="signup()"> Sign Up </button> 

CSS的概述：

input { 
    width: 200px; 
} 

label { 
    display: inline-block; 
    width: 125px; 
} 

Fiddle can be found here