Не удается создать встроенную форму HTML / css - PullRequest
Новая
       3

Не удается создать встроенную форму HTML / css

0 голосов
/ 27 марта 2020

Я пытаюсь создать встроенный форум в WordPress с html и css. У меня проблема, потому что форма не отображается встроенным способом, но в обычном режиме, здесь вы найдете коды: 

   <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>newsletter</title>
</head>

<body>
    <div class="newsletter-subscribe">
        <div class="container">
            <div class="intro">
                <h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
                <p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
            </div>
            <form class="form-inline" method="post" action="the link">

                  <div id="mc_embed_signup_scroll">
                    <div class="form-inline"><input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required=""><input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required=""></div>
                    <div class="form-inline"><button class="btn btn-primary" type="submit">Subscribe </button></div>
            </form>
        </div>
    </div>
</body>

</html>

, и у меня есть CSS, я не включил ее в HTML потому что я в WordPress 

h2{font-size:24px;font-weight:700;margin-bottom:25px;line-height:1.5;padding-top:0;margin-top:0;color:inherit}
.form-inline {
  display: flex;
  flex-flow: row wrap;
    align-items: center; }
  .form-inline {
    flex-direction: column;
 }

.newsletter-subscribe
.intro{font-size:16px;max-width:500px;margin:0 auto 25px}.newsletter-subscribe
.intro p{margin-bottom:35px}
.newsletter-subscribe

.newsletter-subscribe
form .form-control{background:#eff1f4;border:none;border-radius:3px;box-shadow:none;outline:0;color:inherit;text-indent:9px;height:45px;margin-right:10px;min-width:250px}.newsletter-subscribe

Вот что я вижу

enter image description here

1 Ответ

0 голосов
/ 27 марта 2020

Итак, здесь мы go, чтобы достичь этого, вы должны удалить этот фрагмент кода из ваших стилей: 

.form-inline {
   flex-direction: column;
}

Почему, хотя?

Потому что flex-direction: column; сделает каждого из ваших детей div независимым рядом, а всех - столбцом. Как и тот, который вы достигли ранее.

Затем следующий шаг для достижения и встроенных входов и кнопок формы здесь - вывести ваш тег button из независимого подразделения с тем же классом и обернуть все их в один div, такой, как этот: 

 <div class="form-inline">
    <input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
    <input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
    <button class="btn btn-primary" type="submit">Subscribe</button>
 </div>

Окончательный вариант

В конце весь ваш код будет выглядеть примерно так, как показано ниже: 

h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.5;
  padding-top: 0;
  margin-top: 0;
  color: inherit;
}

.form-inline {
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter-subscribe .intro {
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto 25px;
}

.newsletter-subscribe .intro p {
  margin-bottom: 35px;
}

.newsletter-subscribe .newsletter-subscribe form .form-control {
  background: #eff1f4;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  outline: 0;
  color: inherit;
  text-indent: 9px;
  height: 45px;
  margin-right: 10px;
  min-width: 250px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>newsletter</title>
</head>

<body>
  <div class="newsletter-subscribe">
    <div class="container">
      <div class="intro">
        <h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
        <p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
      </div>
      <form class="form-inline" method="post" action="the link">

        <div id="mc_embed_signup_scroll">
          <div class="form-inline">
            <input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
            <input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
            <button class="btn btn-primary" type="submit">Subscribe </button>
          </div>
      </form>
      </div>
    </div>
</body>

</html>

ОБНОВЛЕНИЕ

Таким образом, чтобы сделать пробел между этими входами, вы должны добавить свойство margin для каждого из дочерних элементов , как показано ниже: 

.form-inline input, .form-inline button {
   margin: 0 5px;
}

Тогда конечный результат будет выглядеть так: 

h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.5;
  padding-top: 0;
  margin-top: 0;
  color: inherit;
}

.form-inline {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-inline input, .form-inline button {
  margin: 0 5px;
}

.newsletter-subscribe .intro {
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto 25px;
}

.newsletter-subscribe .intro p {
  margin-bottom: 35px;
}

.newsletter-subscribe .newsletter-subscribe form .form-control {
  background: #eff1f4;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  outline: 0;
  color: inherit;
  text-indent: 9px;
  height: 45px;
  margin-right: 10px;
  min-width: 250px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>newsletter</title>
</head>

<body>
  <div class="newsletter-subscribe">
    <div class="container">
      <div class="intro">
        <h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
        <p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
      </div>
      <form class="form-inline" method="post" action="the link">

        <div id="mc_embed_signup_scroll">
          <div class="form-inline">
            <input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
            <input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
            <button class="btn btn-primary" type="submit">Subscribe </button>
          </div>
      </form>
      </div>
    </div>
</body>

</html>

ПРИМЕЧАНИЕ: Свойство margin сокращено до margin: /*margin-top margin-right margin-bottom margin-left*/, поэтому, если вы используете его следующим образом: margin: 0 5px top и нижние поля будут равны 0, а правые и левые поля будут равны 5px.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...