Question

我有下面的代码，但是，它在浏览器中显示如下：

       checkbox
             yes, I give permission

我该如何解决这个问题？这是自然的方式吗，它永远不会对齐，我需要以不同的方式来设计它；还是一般有不同的方法来做到这一点？我不知道该怎么办！

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    color:#000; 
    font-size:20px;
    font-weight:900;
    display: inline-block;
    /* width: 140px; */
    text-align: right;
}

input {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 300px;
    border: 1px solid black;
    border-bottom: 1px solid black;
}

<label for="permission"><input type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission </label>

Answer 1

给你...

#for_label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  color: #000;
  font-size: 20px;
  font-weight: 900;
  display: inline-block;
  /* width: 140px; */
  text-align: right;
}

#for_input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: inline-block;
  border: 1px solid black;
  border-bottom: 1px solid black;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>

  <label id='for_label' for="permission"><input id='for_input' type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission</label>

</body>

</html>

Answer 2

您在输入中使用了 width，它使文本转到下一行。已删除相同内容并添加 inline-block 以保留复选框旁边的文本。

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    color:#000; 
    font-size:20px;
    font-weight:900;
    display: inline-block;
    /* width: 140px; */
    text-align: right;
}

input[type=checkbox] {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: inlin-block;
    border: 1px solid black;
    border-bottom: 1px solid black;
    margin: 5px 10px 5px 0;
}

<label for="permission"><input type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission </label>

将标签文本和输入复选框彼此对齐

2 个答案: