css - 表单中的标签定位(使用 div)

Question

这里是编码新手。我正在尝试构建一个简单的表单(第一个、最后一个、电子邮件、国家/地区)，并且每个标签都有对应的标签。定位明智，我想在每个输入上方都有标签。但是，我遇到的一些问题是将第一个和最后一个输入彼此相邻(水平放置)，同时保持标签在上方。

<div id="firstlast" class="grid_8">
     <label for="first">First Name</label>
     <input type="text" name="first" id="first">
     <label for="last">Last Name</label>
     <input type="text" name="last" id="last"><br>
  </div>

和 CSS

.firstlast div {
   float: left;
   clear: none;
   display:inline;
}

我可以使用换行符将第一个放在输入上，但换行符仍然适用于第二个标签和表单。

对此有什么想法吗？

谢谢!

Answer 1

试试这个:

<form name="" method="post">
       <div style="float:left;margin-right:20px;">
            <label for="first">First Name</label>
         <input type="text" name="first" id="first">

        </div>

        <div style="float:left;">
            <label for="last">Last Name</label>
         <input type="text" name="last" id="last">
        </div>

        <label for="subject">Subject</label>
        <input id="subject" type="text" value="" name="subject">

        <label for="message">Message</label>
        <input id="message" type="text" value="" name="message">

    </form>

和 CSS:

input, label {
    display:block;
}