0

我提前道歉，我有非常有限的编码经验，并且正在努力掌握 HTML ......

在从洞察力（下面/附件）中为联系表格应用一些基本代码时，我正在尝试合并此处讨论的内容

但似乎无法正确处理，只是希望左侧的字段标题与它们后面的实际字段对齐，在每个字段之间有一个返回，同时坚持使用 Insightly 所需的编码。

提前感谢您的帮助！

[编辑 1]

非常感谢，我现在已经设法通过一些 CSS（附加）使其或多或少地看起来像想要的那样。不幸的是，我不能完全让它按需要运行，它提交到非常好，但它没有在提交时清除字段，我也没有找到一种工作方法来确认它已发送，除了特别丑陋的警报窗口（尤其是在 chrome 中）..“提交时重置”的任何帮助以及告诉用户它已发送的方式都会很棒！我确实从这里尝试了一些 CSS，但无济于事......

      <style type="text/css">
/*************CHSE Stylesheet ***/
body { 
    background-color: transparent;
height:360px;
width:280px;
}
textarea {
    height:70px;
    width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
4

1 回答 1

0

吸引人的布局的关键是 DIV 和 CSS。

首先，使用 DIV 对各个输入区域进行分组，并将每个区域划分为左/右（通过float）。

例如，您可能希望标签和输入字段很好地对齐：

.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
  <div class="frmGroup">
    <div class="frmLeft"><label for="fn">First Name:</label></div>
    <div class="frmRight"><input id="fn" type="text" /></div>
  </div>
  <div class="frmGroup">
    <div class="frmLeft">Last Name:</div>
    <div class="frmRight"><input type="text" /></div>
  </div>
  <div id="thisone">
    <textarea cols="50" rows="5"></textarea>
  </div>
</form>

该float指令特别有用，因为它允许您并排对齐 DIV。然而！它还从 HTML“流”中删除了 DIV，这意味着它们占用了零垂直空间。为了解决这个问题，添加overflow:____到父 DIV。例如，我使用了overflow:hidden]。在底部的 jsFiddle 中，通过删除/添加该行进行实验。

您还可以为特定的 DIV 提供一个 ID，并将其设置为在上方/下方/左/右具有边距或填充。

DIV 具有作为元素的额外优势，这与在末尾block添加 a 具有相同的效果。<br>

*另请注意，该<label>标签实际上只对按钮、复选框等有用，因为它们允许用户通过单击文本标签来单击按钮/复选框。

这是上述演示的 jsFiddle ，您可以进行试验。

于 2016-04-02T00:07:05.047 回答