如何将文本移动到 CSS 中复选框的右侧？答案

【问题标题】：How do I shift the text to the right of the checkbox in CSS?如何将文本移动到 CSS 中复选框的右侧？
【发布时间】：2018-06-25 03:50:25
【问题描述】：

我在移动文本“我同意在我提交此表单后发生的一切。拿走我的所有数据！”时遇到了一点麻烦。复选框的右侧，并使复选框与左侧的其他文本对齐。代码在下面的codepen链接中，任何输入将不胜感激！

HTML 下面：

<html>
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
</head>
<form>
  <h1>Sign up for the newsletter</h1>

  <body>
    <br></br>
    <p>
      <label for="name">Name</label>
      <input id="name" name="Name" type="text">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="Email" type="email">
    </p>

    <label>
  <input type="checkbox" value="true" />I agree to everything that will happen after I submit this form. Take All my data!</label>

    <br></br>
    <p>
      <input type="submit" value="SUBMIT" id="submit">
    </p>
  </body>
</form>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8">
</script>

<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</html>

CSS 下面：

@import url('https://fonts.googleapis.com/css?family=Varela+Round');    
@import url('https://fonts.googleapis.com/css?family=Raleway:500');


form {
  background: #fff;
  padding: 4em 4em 2em;
  max-width: 420px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: 9px;
  position: relative;
}


h1 {
  font-size: 15px;
  font-weight: bold;
  font-color: black;
  font-family: 'Varela Round', sans-serif;
}


body {
  font-size: 7px;
  background: #d7d7d7; /* fallback */
  font-family: 'Raleway', sans-serif;
}

p {
  margin: 0 0 3em 0;
  position: relative;
}

label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 1em;
  color: #333;
}

input {
  display: block;
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  outline: none
}

input[type="text"],
input[type="email"] {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1.6em;
  padding: .8em .5em;
  border-radius: 5px;
}

input[type="text"]:focus,
input[type="email"]:focus {
  background: #fff
}

input[type="submit"] {
  font-family: 'Varela Round', sans-serif;
  background: #f45226;
  border-radius: 8px;
  font-weight: bold;
  width: 30%;
  border: none;
  color: #fefefe;
  cursor: pointer;
  display: block;
  font-size: 1.6em;
  line-height: 2em;
  margin: auto;
  outline: none;
  padding: 8px;
  letter-spacing: 1px;
  text-shadow: 0 1px #f45226;
  box-shadow: 0px 4px 8px rgba(165, 126, 157, 0.62);
}

input[type="submit"]:active {
  top: 1px;
  outline: none;
  box-shadow: none;
}

label[type="checkbox"] {
    display: block;
    padding-left: 20px;
}

input[type="checkbox"] {
    margin-left: -20px;
}

【问题讨论】：

</head>之后的第一个开始标签必须是<body>

标签： html css forms

【解决方案1】：

问题：

您的输入有 display: block;，它占据了整个可用宽度
你的输入有width: 100%，你不需要这个。

解决方案：

为您的复选框添加一个类，以便新样式仅适用于该特定复选框。 .terms-checkbox

CSS

input.terms-checkbox {
  display:inline;
  width: auto;
}

在这里查看：https://codepen.io/kiranvj/pen/BVPKLN

【讨论】：

我猜这部分 CSS 是为了匹配文本输入的宽度和容器的宽度。但它也适用于复选框（居中），尽管复选框忽略了设置，只是它居中。
@Wayne，是的，这里可能就是这种情况。对于复选框和单选框，即使我们提供width: 100%，它也会占用可用空间，但复选框的外观大小相同。
少 CSS 就是最好的 CSS。
+1 用于展望未来并避免“我在想什么？”当页面需要更改时。

【解决方案2】：

更新你的CSS如下：

input[type="checkbox"] {
margin-left: -20px;
display: inline-block;
width: auto;    
margin-right: 10px;

}

更新代码笔：https://codepen.io/bhupendra1011/pen/eKjJwW

【讨论】：

【解决方案3】：

您需要更新输入元素的width 和display 属性。试试这个代码。

CSS

@import url('https://fonts.googleapis.com/css?family=Varela+Round');

@import url('https://fonts.googleapis.com/css?family=Raleway:500');


form {
  background: #fff;
  padding: 4em 4em 2em;
  max-width: 420px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: 9px;
  position: relative;
}


h1 {
  font-size: 15px;
  font-weight: bold;
  font-color: black;
  font-family: 'Varela Round', sans-serif;
}


body {
  font-size: 7px;
  background: #d7d7d7; /* fallback */
  font-family: 'Raleway', sans-serif;
}

p {
  margin: 0 0 3em 0;
  position: relative;
}
label {
  display: block;
  font-size: 1.6em;
  margin: 0 0 1em;
  color: #333;
}
input {
  display: block;
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  outline: none
}
input[type="text"],
input[type="email"] {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1.6em;
  padding: .8em .5em;
  border-radius: 5px;
}
input[type="text"]:focus,
input[type="email"]:focus {
  background: #fff
}

input[type="submit"] {
  font-family: 'Varela Round', sans-serif;
  background: #f45226;
  border-radius: 8px;
  font-weight: bold;
  width: 30%;
  border: none;
  color: #fefefe;
  cursor: pointer;
  display: block;
  font-size: 1.6em;
  line-height: 2em;
  margin: auto;
  outline: none;
  padding: 8px;
  letter-spacing: 1px;
  text-shadow: 0 1px #f45226;
  box-shadow: 0px 4px 8px rgba(165, 126, 157, 0.62);
}

input[type="submit"]:active {
  top: 1px;
  outline: none;
  box-shadow: none;
}
.checkbox {
  padding-left: 20px;
  position:relative;
}
.checkbox input[type="checkbox"] {
  display: inline-block;
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
}

HTML

<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
</head>
    <form>
    <h1>Sign up for the newsletter</h1>
    <body>

    <br></br>
        <p>
            <label for="name">Name</label>
            <input id="name" name="Name" type="text">
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="Email" type="email">
  </p>

    <label class="checkbox">
  <input type="checkbox" value="true" /> I agree to everything that will happen after I submit this form. Take All my data!</label>    

    <br></br>
        <p>
            <input type="submit" value="SUBMIT" id="submit">
        </p>
      </body>
    </form>
    <script
          src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8">
  </script>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</html>

【讨论】：

【解决方案4】：

您的复选框继承了以其他输入元素为中心的输入 CSS 的属性。

input {
  display: block;
  **margin: auto;**
  box-sizing: border-box;
  **width: 100%;**
  outline: none
}

将它们重新设置为不居中。

input[type="checkbox"] {
    margin-left: 0;
    width: auto;
}

【讨论】：