难以调整文本框位置

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了解结果......

您也可以使用bootstrap快速完成此操作并使其看起来不错。

编辑：您应该使用其他答案建议的标签，我只是假设您已根据您使用每种类型之一的事实将标题元素放在那里。

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