2016-07-10 7 views
1

私は月、日、年が入力されていますので、日と年を揃えたいと思います。私はフォームのすべての要素にmargin-left:500px;を入れるように、すべてのフォームを中央に配置したいと思っています。誰かがこれについて私を助けることができますか?ここでCSS - 入力を別の入力に合わせる

は私がfloatプロパティを追加 enter image description here

更新

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> 

+0

フォーム全体を含めるように編集してください。ただし、これらのオプションをすべて削除してください。これを保持するには、1か月、1日などで十分です。 – Eiko

+0

@エイコハイサー。私はすでに編集しています。 –

答えて

0

をやりたいの絵です:

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

また、ブートストラップCSSクラスを追加することもできます。

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

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

選択要素に追加できます。

+0

正しく整列していない:( –

関連する問題