2017-02-01 4 views
-3

できるだけお互いに隣り合わせにしたい2つのチェックボックスがあります。 テーブルを使用しようとしましたが、テキストをチェックボックスから遠くに置いていました。 このコードをそのまま使用すると、フォーム全体が中央揃えになり、次に2番目のコードが最初のコードの下に配置されます。しかし、私はそれがお互いに隣り合っていることを望んでいます。2つのチェックボックスを合わせる

input { 
 
    width: 375px; 
 
    display: block; 
 
    height: 25px; 
 
    } 
 

 
    input[type=submit] { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 8px 8px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    } 
 

 
    input[type=submit]:hover { 
 
    background-color: #45a049; 
 
    } 
 

 
    input[type=reset] { 
 
    
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 8px 8px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    } 
 

 
    input[type=reset]:hover {  
 
    background-color: #45a049; 
 
    } 
 
    
 
    div { 
 
    border-radius: 5px; 
 
    background-color: #f2f2f2; 
 
    padding: 20px; 
 
    } 
 

 
    body { 
 
    background: linear-gradient(to bottom, white 0%,white 49%,#000000 49%,grey 49%,grey 100%); 
 
    } 
 

 

 
<body> 
 
    <form action="to_pdf2.php" method="POST"> 
 
    <center><b><h2>Leave Application Form</b></h2> 
 
    <br> 
 
<input type="checkbox" value"Sick Leave" name="leavetype" > 
 
<input type="checkbox" value"Personal Leave" name"leavetype" > 
 

 
    
 
     
 
     
 
     
 

+0

彼らは完全なHTMLの抜粋とCSSを提供 –

+0

隣同士に出回っています。レイアウトのためにテーブルを使用しないでください。 – snkv

+0

@Sqnkovコード – RedZ

答えて

0

必要

input{ 
    width: 375px; 
    float: left; // if necessary 
    height: 25px; 
} 

はあなたがフルページで出力

input { 
 
    width: 375px; 
 
    height: 25px; 
 
    } 
 

 
    input[type=submit] { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 8px 8px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    } 
 

 
    input[type=submit]:hover { 
 
    background-color: #45a049; 
 
    } 
 

 
    input[type=reset] { 
 
    
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 8px 8px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    } 
 

 
    input[type=reset]:hover {  
 
    background-color: #45a049; 
 
    } 
 
    
 
    div { 
 
    border-radius: 5px; 
 
    background-color: #f2f2f2; 
 
    padding: 20px; 
 
    } 
 

 
    body { 
 
    background: linear-gradient(to bottom, white 0%,white 49%,#000000 49%,grey 49%,grey 100%); 
 
    } 
 

 

 
<body> 
 
    <form action="to_pdf2.php" method="POST"> 
 
    <center><b><h2>Leave Application Form</b></h2> 
 
    <br> 
 
<input type="checkbox" value"Sick Leave" name="leavetype" > 
 
<input type="checkbox" value"Personal Leave" name"leavetype" > 
 

 
    
 
     
 
     
 
     
 
をチェックすることを確認した場合、あなたは inputから display: blockを削除し、いくつかのCSSを適用することもできます

enter image description here

+0

チェックボックスはまだスタックされています。 – hungerstar

+0

これをプルページで確認してください – Rahul

+0

私は、チェックボックスがそのようにシフトし、375px離れていることは理想的ではないと思います。 – hungerstar

関連する問題