Question

我有2个复选框，如果可能的话，我希望彼此相邻。我已经尝试使用表格，它将文本放在离复选框很远的地方。如果我只使用这个代码，那么我的整个表单都是居中对齐的，那么第二个就是第一个。但我希望它能够彼此相邻。

＆＃13;

    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%);
    }

＆＃13;

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

＆＃13;

Answer 1

您可能希望从display: block删除input并在必要时应用少量CSS

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

确保检查完整页面中的输出

＆＃13;

    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%);
    }

＆＃13;

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

＆＃13;

将2个复选框对齐在一起

1 个答案: