Question

我在转移文本“我同意提交此表格后将要发生的一切。获取我的所有数据！”方面遇到一些麻烦。复选框的右侧，并使该复选框与左侧的其他文本对齐。该代码位于下面的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;
}

Answer 1

问题：

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

解决方案：

将一个类添加到您的复选框，以便新样式将仅应用于此特定复选框。 .terms-checkbox

CSS

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

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

Answer 2

如下更新您的css：

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

}

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

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

Answer 4

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

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

将那些重置为不居中。

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

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

4 个答案: