javascript - 如何显示内联 "input"元素，被 div 包围

Question

我有一个 HTML 代码，有 3 个输入字段:

       <div class="field" >
          <input placeholder="Firstname" class="firstname" id="firstname_field"  name="firstname" size="30" value="" type="text" >
       </div>
       <div class="field" >
           <input placeholder="Lastname" class="lastname" id="lastname_field"  name="lastname" size="30" value="" type="text" >
       </div>
       <div class="field" >
           <input placeholder="Email" class="email" id="email_field"  name="email" size="30" value="" type="text" >
       </div>

目前，因为它们被 div 包围，所以它们显示在 block 中:http://jsfiddle.net/k2Nqp/159/我需要前 2 个字段显示“内联”而不是 block ，第 3 个字段保留为 block 。

如果将“display:inline-block”放入 div 中，就很容易了。但这里棘手的部分是我无法控制此 HTML 代码，因为它是由简码自动生成的。我可以添加 CSS，使用已经存在的类，甚至是 javascript(我使用 javascript 来插入占位符)

并且由于 3 个 div 具有相同的类，它们将显示所有 block 或所有内联，所以我只能在输入字段上工作。不幸的是，我尝试在输入字段中指定“inline-block”，但它不起作用。

关于如何使这项工作有任何想法吗？谢谢!

Answer 1

使用下面的 CSS，达到你预期的效果

.field{
 display:inline; 
}
#email_field{
  display:block;
}

http://jsfiddle.net/Nagasai_Aytha/k2Nqp/164/

display:inline 将允许所有字段以内联方式显示，而 display:block 在第三个字段上，将使其成为 block 元素并显示在单独的行中