Question

我希望以这种方式对齐标签和文本字段：

但是我从代码中获得的输出是：

我的代码是：

<span class="questions">Your Date of birth: </span>
	<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
	<select> 
		<option selected disabled>Select Country</option>
		<option>India</option>
	</select><br>
<span class="questions">In which University You Are In:</span>
	<select> 
		<option selected disabled>Select University</option>
		<option>AKTU</option>
	</select><br>
<span class="questions">In which College You Are In:</span>
	<select> 
		<option selected disabled>Select Your College</option>
		<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
	</select><br>
<span class="questions">Your Mobile Number: </span>
	<input type="tel" placeholder="Mobile Number"/><br>
<button class="btn">Proceed to Feeds.</button>

我应该向CSS添加什么以便获得所需的输出，或者我可以在 标记之前添加<span>以根据需要进行调整。任何人都可以帮助我。

Answer 1

试试这个：

＆＃13;

@Override
    public boolean onOptionsItemSelected(final MenuItem item) {
        Intent intent = new Intent();
        switch (item.getItemId()) {
            case R.id.mnuRefresh: // your menu item id
                reCreate();
                break;

        }
        return false;
    }

＆＃13;

.questions{
width:50%;
  text-align:right;
  display:inline-block;
}
input{width:150px;}
select{width:150px;}

＆＃13;

Answer 2

在form-horizontal代码

中使用form课程

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

＆＃13;

全文观看

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({
        beforeShow: function(){    
           $("#abc").css('line-height', '14em') 
        },

    });

  } );
  function chngecss(){
        $("#abc").css('line-height', 'unset');
        $('#datepicker').Close();
    }
  </script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h2>Horizontal form</h2>
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="control-label col-sm-2" for="dob">Your Date Of Birth :</label>
        <div class="col-sm-5" id="abc">
          <input class="form-control" type="text" id="datepicker" onblur="chngecss();" class="ui-datepicker" placeholder="DOB"/><br>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="country">In Which Country You Are In :</label>
        <div class="col-sm-5">
          <select class="form-control">
            <option selected disabled>Select Your College</option>
            <option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="mobno">Your Mobile Number :</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" id="mobno" placeholder="Enter Mobile Number">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-5">
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-5">
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5">
          <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5">
          <button type="submit" class="btn btn-default">Submit</button>
        </div>
      </div>
    </form>
  </div>

如何对齐标签和表单字段

3 个答案: