1. Zuhause
  2. Frage und Antwort
  3. Vertikale Ausrichtung der Textbox

Vertikale Ausrichtung der Textbox

2017-01-24 9 views
1

Ich möchte alle Felder vertikal ausrichten, die genau untereinander liegen. Derzeit werden alle Felder ausgerichtet zufällig bin ich mit CSS Das Layout Bootstrap sollte wie folgt sein:Vertikale Ausrichtung der Textbox

Label1: Textbox1 
Label2: Textbox2

Hier ist der Code-Schnipsel: Welche Klasse kann ich die Ausrichtung der Textbox zu beheben verwenden? Irgendeine Hilfe?

<div ng-controller="headerCtrl"> 
    <div class="container" style="background-color:white"> 

     <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2> 


     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <!--<div class="panel-heading"> 
        <h4 class="panel-title" style="text-align: center"> 


         <a>Add the Headers </a> 
        </h4> 
       </div>--> 

       <div class="panel-body"> 

        <section> 
         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group" style="margin-left:-125px;"> 
             <label for="currentmonth">Total Work days in Current Month:</label> 
            </div> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-140px;">Sick/Emergency Leave :</label> 
            </div> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 


         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick/Emergency Leave) :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016) :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 


         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

        </section> 



         <div class="pull-right"> 

          <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button> 

          <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 

         </div> 






        </div> 
      </div> 

     </div> 
     <div> 

     </div> 
    </div> 

</div>

Quelle

2017-01-24 beginner

Antwort

1

Diese Antwort unterscheidet sich von der oben Antwort von Rafa Romero gegeben. Ich habe verschiedene Stile für diese hinzugefügt. Hier sind die 2 Möglichkeiten, die Sie verwenden können. Click on this link to view image

<section> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" style="margin-left:-125px;"> 
        <label for="currentmonth">Total Work days in Current Month:</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 

    <br /> 

    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group"> 
        <label for="annualeave">Annual Leave :</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 
</section> 

<br><h1 class="text-center">OR</h1><br> 

<section> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" style="margin-left:-125px;"> 
        <label for="currentmonth">Total Work days in Current Month:</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 

    <br /> 

    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" > 
        <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 
</section>

Quelle

2017-01-24 11:32:23

1

Sie können für die texfields mit absolute position versuchen und von der rechten oder linken Seite

input{ 
 
    position: absolute; 
 
    left: 275px 
 
}
<form class="form-inline" style="margin-left:20px"> 
 
    <div class="form-group"> 
 

 
     <label for="currentmonth">Total Work days in Current Month:</label> 
 
     <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
 

 
    </div> 
 

 
</form> 
 

 
</div> 
 
<br /> 
 
<div class="row"> 
 

 
    <form class="form-inline" style="margin-left:20px"> 
 
     <div class="form-group"> 
 
      <label for="annualeave">Annual Leave :</label> 
 
      <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
 
     </div> 
 

 
    </form> 
 

 
</div> 
 
<br />

Quelle

2017-01-24 08:01:48

1

Sie verwenden eine Sache Bootstrap-Klasse beide im gleichen Abstand Ausrichtung so tun Verwenden Sie Spalten und geben Sie .col-sm-8 bzw. .com-sm-4 ein und überprüfen Sie.

<div class="form-group"> 
     <label for="annualeave" class="col-sm-8">Annual Leave :</label> 
     <div class="col-sm-4"> 
     <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
     </div> 
</div>

Quelle

2017-01-24 08:03:47 Uiupdates

2 
<div class="row"> 
      <form> 
       <div class="form-group"> 
        <label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label> 
        <input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
        <div class="col-md-4"></div> 
       </div> 
      </form> 
     </div> 
     <div class="row"> 
      <form> 
       <div class="form-group"> 
        <label class="col-md-4" for="annualeave">Annual Leave :</label> 
        <input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
        <div class="col-md-4"></div> 
       </div> 
      </form> 
     </div>

Quelle

2017-01-24 09:13:25 sneha

Verwandte Themen

 Verwandte Themen