Question

У меня небольшая проблема с переносом текста: «Я согласен на все, что произойдет после того, как я отправлю эту форму. Возьмите все свои данные!» справа от флажка и установите флажок в соответствии с другим текстом слева. Код приведен в приведенной ниже ссылке на кодовый блок, любой вход будет принят с благодарностью!

Войдите в форму ниже

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

kiranvj · Answer 1 · 25 июня 2018

Issue

Ваш ввод имеет display: block;, который занимает всю доступную ширину
Ваш ввод имеет width: 100%, вам это не нужно.

Решение

Добавьте класс к вашему флажку, чтобы новые стили применялись только к этому конкретному флажку. .terms-checkbox

CSS

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

Проверьте здесь: https://codepen.io/kiranvj/pen/BVPKLN

Aryan Twanju · Answer 2 · 25 июня 2018

Вам необходимо обновить свойства 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>

Wayne · Answer 3 · 25 июня 2018

Ваш флажок наследует свойства вашего входного CSS, которые центрируют другие элементы ввода.

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

Сбросьте их обратно в центр.

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

Bhupendra · Answer 4 · 25 июня 2018

Обновите ваш CSS, как показано ниже:

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

}

Обновлен код ручки: https://codepen.io/bhupendra1011/pen/eKjJwW

Как мне сдвинуть текст справа от флажка в CSS?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 4 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как мне сдвинуть текст справа от флажка в CSS?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 4 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов