2017-02-01 3 views
-3

У меня есть 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

они Allready рядом друг с другом –

+0

Обеспечить полный HTML фрагмент и CSS. Никогда не используйте Таблицы для макета. – snkv

+0

Я отредактировал код sir @Sqnkov – RedZ

ответ

0

вы можете удалить display: block из input и применить несколько CSS при необходимости

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" > 
 

 
    
 
     
 
     
 
     
 

enter image description here

+0

Флажки по-прежнему сложены. – hungerstar

+0

проверить это на странице выталкивания – Rahul

+0

Я предполагаю, что это не идеальный вариант, когда эти флажки смещаются так же, как и на расстоянии 375 пикселей. – hungerstar

Смежные вопросы