Как я могу разместить поля формы внутри текста? - PullRequest
Новая
       6

Как я могу разместить поля формы внутри текста?

0 голосов
/ 09 октября 2018

Website screenshot

Я пытаюсь разместить кнопку списка рассылки справа от адреса.Я только начинаю, и это расстраивает меня в течение многих дней.Я учился в школе W3, но не могу понять, как это сделать.Сначала я использовал div, но потом узнал больше об элементе span.Я думал, что это все исправит, но, увы, мне нужна помощь.

Просто, чтобы убедиться, что я понял, я пытаюсь получить кнопку списка рассылки и ввести текст справа от текста "Посетить наш склад".чем это ниже. 

<span>
Visit our wholesale warehouse<br>
7507 Kingspointe Parkway<br>
Suite 101<br>
Orlando, FL. 32819<br>
US<br>
Phone: 407-420-<br><a href="http://maps.google.com/maps?oi=map&q=7507%20Kingspointe%20Parkway+Orlando+FL+32819">Directions</a>
</span>
  <!--START: FRAME_MAILLIST-->
<span class='container'>
  <span class='fieldName'>
    <form method="post" name="mailing" action="mailing_list.asp?action=add" onsubmit=" mailing_list();">
      <label style="font—size:160%;">[frame_mailinglist]</label></span>
      <span class="mailist-box">
      </span>
      <span class='data'>
        <input type="text" name="email" value="" placeholder="Email Address" />
        <input type="submit" name="www" value="[mailinglist_button]" />
        <input class="clear"></span>
      </span >
      <input type="radio" name="subscribe" value="1" checked="checked" />
      <span class="menu-text">[mailinglist_subscribe]</span>
      <input type="radio" name="subscribe" value="0" />
      <span class="menu-text">[mailinglist_unsubscribe]</span>
      <span class="clear"></span>
    </form>
  </span>
  </span>
    </span>
<span class="clear"></span>

1 Ответ

0 голосов
/ 09 октября 2018

Лучше всего использовать div элементы здесь.Но то, что вы действительно ищете, это CSS-свойство с именем flexbox.

. Во-первых, вот как я бы структурировал ваш HTML: 

<div class="overall-container">
  <div class="address-container">
   /* address html goes here /*
  </div>
  <div class="mailing-list-container">
   /* mailing list html goes here /*
  </div>
</div>

Теперь, в вашем CSS вы можете написатьследующее: 

.overall-container {
  width: 100vw; // You can adjust the width of the whole container here

  display: flex;
  flex-direction: row; // This is the most important part for you
  justify-content: center; // Look up other options if this doesn't fit
  align-items: center; // Again look up for other options
}

Это поместит ваш адресный контейнер div и ваш список рассылки div рядом друг с другом.Свойство flex-direction row контролирует это.Если вы хотите, чтобы они накладывались друг на друга, установите flex-direction: column.

Надеюсь, это поможет.Если вам нужна дополнительная информация, посмотрите CSS flexbox на MDN.

...