如何显示内联“输入”元素，通过div的

我有一个HTML代码包围，3个输入字段：如何显示内联“输入”元素，通过div的

 <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的包围，他们在块显示：http://jsfiddle.net/k2Nqp/159/ 我需要2个第一个字段来显示“内联”而不是块，第三个要留作块。

如果您在div的内部放置“display：inline-block”，很容易。但这里棘手的部分是，我无法控制这个HTML代码，因为它是由短代码自动生成的。我可以添加CSS，使用已经存在的类，甚至javascript（我使用javascript来插入占位符）

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

关于如何使这项工作的任何想法？谢谢！

来源

2016-07-15 Jimmy Gibs

http://jsfiddle.net/k2Nqp/161/ –

使用下面的CSS，实现你预期的结果

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

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

显示：内联将允许显示在在线和显示所有领域：在第三场块，将使块元素并且被显示在单独的行

来源

2016-07-15 19:26:02

@PatrickGregorio，更新小提琴URL ..Thanks :) –

简单有效的:) Thak你+1！ –

可能是你可以使用第n个孩子（）选择结合你的div的

div:nth-child(1),div:nth-child(2) { 
    display:inline; 
}

Fiddle link

Read about nth-child

来源

2016-07-15 19:29:46

这是一个非常好的答案！我用另一个，因为我对它更舒适，但是这个对于很长的表单来说肯定更好。谢谢！ –

如果您需要更复杂的领域，我建议检查出的要做到这一点：第n-的类型（）和：第n个孩子（）的CSS选择器。

.field { 
 
    display: inline-block; 
 
} 
 
.field:last-child { 
 
    display: block; 
 
}

<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>

来源

2016-07-15 19:36:04 Kenji

感谢您的反馈，我的表单确实更复杂，例子只能找到我可以重现的解决方案:)。我已经成功地使用了上面的一次，但是谢谢:) –

的CSS规则之下将选择所有除了最后一个领域类的元素，并与价值inline-block应用display风格。

.field:not(:last-child) { 
    display:inline-block; 
}

来源

2016-07-15 20:00:15 10100111001

在我的真实形式中，我在电子邮件下面有更多的字段，所以上面的解决方案对我来说会好一些，但是对于最后一种字段beeing电子邮件！谢谢 –

如何显示内联“输入”元素，通过div的

回答

相关问题