CSS - Richten Sie den Eingang auf einen anderen Eingang

Ich habe einen Eingang Monat, Tag und Jahr, und ich möchte den Tag und Jahr zu Monat ausrichten. Ich möchte alle meine Form zentrieren, so dass ich ein margin-left:500px; auf jedes Element des Formulars setzen. Kann mir jemand dabei helfen? HierCSS - Richten Sie den Eingang auf einen anderen Eingang

ist das Bild von dem, was ich

Update

here is my whole code. 

<!DOCTYPE HTML> 
<html> 
<head> 
      <link rel="stylesheet" href ="css/bootstrap.min.css"> 
      <link rel="stylesheet" href="css/bootstrap-datetimepicker.css" /> 
      <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style> 
       .date{ 
        margin-left: 500px; 
        width: 160px; 
       } 

      .title{ 
       margin-left: 500px; 
       width: 300px; 
      } 
      .etitle{ 
       margin-left: 500px; 
       width: 200px; 
      } 
      .evenue{ 
       margin-left:500px; 
       width: 150px; 
      } 
      form-group, label{ 
       margin-left: 500px; 
      } 
      form-group, input{ 
       margin-left: 500px; 
      } 
      img{ 
       margin-left: 500px; 
       margin-bottom: 10px; 

      } 
      .content{ 
       margin-left: 500px; 
       width: 400px; 
      } 
      .btn-info{ 
       margin-left: 500px; 
       margin-top: 10px; 
      } 
      .month,.day,.year,.stime,.etime{ 
       width: 120px; 
       margin-left: 500px; 

      } 

     </style> 

</head> 
<body> 

    <h1>Welcome, <?php echo $_SESSION['username']; ?>!</h1> 

    <form method="post" action ="admin.php" enctype="multipart/form-data"> 



       <div class="form-group"> 
         <label for="title">News Title</label> 
         <input type="text" name="title" class="form-control title" id="title" placeholder="News Title" > 
       </div> 
      <div class="form-group"> 
       <label for="title">Date</label> 
       <input type="text" name="date" class="form-control date" id="date" placeholder="Date" > 
      </div> 

      <div class="form-group"> 
        <label for="content">News Content</label> 
       <textarea class="form-control content" name="content" rows="5" id="content" ></textarea> 
      </div>  


        <img id="blah" src="" alt="image here" width="200px" height="140px"/> 
        <input id="image" name="image" class="fileupload" type="file" accept="image/*"/> 
       <button type="submit" name="submit" class='btn btn-info '>Post news</button> 



     <hr> 

       <div class="form-group"> 
        <label for="title">Event Title</label> 
        <input type="text" name="etitle" class="form-control etitle" id="etitle" placeholder="Event Title" > 
      </div> 


       <div class="form-group"> 
        <label for="title">Event Venue</label> 
        <input type="text" name="evenue" name="evenue" class="form-control evenue" id="evenue" placeholder="Event Venue"> 
      </div> 



     <div class="form-group"> 
       <label for="month">Start Date:</label> 
     <select class="form-control month" id="month" name="month"> 

        </select> 
       </div> 


      <div class="form-group"> 
        <select class="form-control day" name="day"> 
         <option value="Day">Day</option> 

        </select> 
       </div> 

      <div class="form-group"> 
       <select class="form-control year" name="year"> 

       </select> 
      </div> 


     <div class="form-group"> 
      <label for="month">End Date:</label> 
      <select class="form-control month" id="month" name="emonth"> 

        </select> 
       </div> 


       <div class="form-group"> 
        <select class="form-control day" name="eday"> 
         <option value="Day">Day</option> 

        </select> 
       </div> 


      <div class="form-group"> 
       <select class="form-control year" name="eyear"> 

       </select> 
      </div> 


     div class="form-group"> 
     <label for="stime">Start Time:</label> 
      <select class="form-control stime" id="stime" name="stime"> 

       </select> 
      </div> 

    <div class="form-group"> 
    <label for="etime">End Time:</label> 
     <select class="form-control etime" id="etime" name="etime"> 

       </select> 
      </div> 

       <button type="submit" name="submitevent" class='btn btn-info '>Post news</button> 


</form>

Quelle

2016-07-10 Yukihira Soma

Bitte bearbeiten Sie, um das ganze Formular einzuschließen, aber bitte entfernen Sie alle diese Optionen ... es ist genug, um einen Monat, einen Tag usw. zu behalten, um dies lesbar zu halten. – Eiko

@Eiko Hallo mein Herr. Ich habe bereits bearbeitet. –

hinzufügen Eigenschaft float zu tun:

.month,.day,.year{ 
     width: 120px; 
     float: left; 
     margin-right: 5px; 
}

Oder Sie können eine Bootstrap-CSS-Klasse hinzufügen:

.month,.day,.year{ 
     width: 120px; 
     margin-right: 5px; 
} 

<select class="form-control month pull-left"

Zu den ausgewählten Elementen.

Quelle

2016-07-10 07:03:48 Jai

Es ist nicht richtig ausgerichtet :( –

Wenn Ihre whant Kompatibilität mit IE10 oder älter Sie Schwimmer verwenden können: links, css floating 2 inputfields in a form

Aber wenn dies nicht tun, werde ich benutzen Display: flex, CSS display: flex, align-center and button with checkboxes (nicht die gleiche, aber ich denke dabei helfen kann)

Quelle

2016-07-10 07:09:02 Sanguino

CSS - Richten Sie den Eingang auf einen anderen Eingang

Antwort

Verwandte Themen