Question

我还在为学校做一个项目，这是我孩子们的网站。我只是放了一个表格，但这些字段似乎与文本框排成一行。我不知道自己做错了什么。我已经在网站和本网站上搜索了答案。我相信老师希望实际在表单中设置表单并使用表单标签。任何帮助表示赞赏。这是我表格的HTML。

<section>
    <div id="salesDetails"><h2>Sales Details</h2>
    <form name="checkOut" method="post" method="get" action="mailto:&#101;&#116;&#119;&#049;&#049;&#050;&#052;&#049;&#064;&#097;&#111;&#108;&#046;&#099;&#111;&#109";>
            <div class="formRow">
                <label for="contactName"><p>Contact Name</p></label>
                <input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50" 
                placeholder="Enter your full name." required autofocus/>
            </div>
            <div class="formRow">
                <label for="phoneNumber"><p>Phone Number</p></label>
                <input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
            </div>
            <div class="formRow">
                <label for="emailAddress"><p>Email Address</p></label>
                <input name="emailAddress" id="emailAddress" type="email" size="50" required/>
            </div>
            <div class="formRow">
                <label for="address"><p>Address</p></label>
                <input name="address" id="address" type="text" size="50" required/>
            </div>
            <div class="formRow">
                <label for="serviceSelection"><p>Service Selection</label>
                <select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
                    <option value="-1">-Select (Max 2)-</option>
                    <option value="1">Lawnmowing/Front Yard----00001----$10</option>
                    <option value="2">Lawnmowing/Backyard----00002----$10</option>
                    <option value="3">Lawnmowing/Whole Yard----00003----$20</option>
                    <option value="4">Leaf Raking/Front Yard----00004----$15</option>
                    <option value="5">Leaf Raking/Backyard----00005----$15</option>
                    <option value="6">Leaf Raking/Whole Yard----00006----$30</option>
                    <option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
                    <option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
                </select>
            </div>
            <div class="formRow">
                <label for="specialRequests"><p>Special Requests</p></label>
                <textarea cols="40" rows="6" name="specialRequests" id="specialRequests" ></textarea>
            </div>
            <div class="formRow">
                <label for="serviceNeededBy"><p>Service Needed By</p></label>
                <input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50"/>
            </div>
            <div class="formRow">
                <input style="width:70px" type="submit" value="Submit"/>
                <input style="width:70px" type="reset" value="Reset"/>
            </div>
    </section>

我是否缺少HTML或CSS维度？

Answer 1

这是因为您已在段落中显示了字段，这些字段会在字段后默认显示换行符。

尝试以下HTML：

<section>
  <div id="salesDetails">
    <h2>Sales Details</h2>
    <form name="checkOut" method="post" method="get" action="mailto:&#101;&#116;&#119;&#049;&#049;&#050;&#052;&#049;&#064;&#097;&#111;&#108;&#046;&#099;&#111;&#109" ;>
      <div class="formRow">
        <label for="contactName">
          Contact Name
        </label>
        <input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50" placeholder="Enter your full name." required autofocus/>
      </div>
      <div class="formRow">
        <label for="phoneNumber">
          Phone Number
        </label>
        <input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
      </div>
      <div class="formRow">
        <label for="emailAddress">
          Email Address
        </label>
        <input name="emailAddress" id="emailAddress" type="email" size="50" required/>
      </div>
      <div class="formRow">
        <label for="address">
          Address
        </label>
        <input name="address" id="address" type="text" size="50" required/>
      </div>
      <div class="formRow">
        <label for="serviceSelection">
          Service Selection</label>
        <select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
          <option value="-1">-Select (Max 2)-</option>
          <option value="1">Lawnmowing/Front Yard----00001----$10</option>
          <option value="2">Lawnmowing/Backyard----00002----$10</option>
          <option value="3">Lawnmowing/Whole Yard----00003----$20</option>
          <option value="4">Leaf Raking/Front Yard----00004----$15</option>
          <option value="5">Leaf Raking/Backyard----00005----$15</option>
          <option value="6">Leaf Raking/Whole Yard----00006----$30</option>
          <option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
          <option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
        </select>
      </div>
      <div class="formRow">
        <label for="specialRequests">
          Special Requests
        </label>
        <textarea cols="40" rows="6" name="specialRequests" id="specialRequests"></textarea>
      </div>
      <div class="formRow">
        <label for="serviceNeededBy">
          Service Needed By
        </label>
        <input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50" />
      </div>
      <div class="formRow">
        <input style="width:70px" type="submit" value="Submit" />
        <input style="width:70px" type="reset" value="Reset" />
      </div>
</section>

Answer 2

我通常做这样的事情：

<form action="">
  <div class="control">
    <div class="label">
      <label for="something">Something</label>
    </div>
    <div class="input">
      <input type="text" name="something">
    </div>
  </div>
</form>

这个概念是我们将每个标签/输入包装在它自己的容器中，并为实际的表单字段本身提供两个包含元素。让标签浮到一边，并在输入容器上留下相等数量的边距。

.control .label{
  float:left;
  width:80px;
  display:inline;
}

.control .input{
  margin-left:100px;
}

这使得布局非常整洁，包含所有类型的不同表单字段;一种非常可靠且易于控制的模式。

有点像：

https://jsfiddle.net/64jnaqak/

字段和文本框不会在我的HTML表单中排成一行

2 个答案: