如何放置与文本内联的表单域？

Question

我正在尝试将邮件列表按钮放在地址的右侧。我刚开始，这让我很沮丧。我一直在学习使用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>

Answer 1

最好在这里使用div元素。但是，您真正要寻找的是一个名为flexbox的CSS属性。

首先，这是构造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的{​​{1}}属性对此进行控制。如果您希望它们彼此叠置，请设置row。

希望这会有所帮助。如果您需要更多信息，请在MDN上查找CSS flexbox。