如何显示被div包围的内联“输入”元素
我有一个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包围，所以它们在块中显示：http://jsfiddle.net/k2Nqp/159/ I需要第一个字段显示“内联”而不是块，第三个字段作为块显示。
如果你把“显示:内联块”放在div的内部，那就很容易了。但是这里的棘手之处在于，我对这个HTML代码没有任何控制，因为它是由一个短代码自动生成的。我可以添加CSS，使用已经存在的类，甚至javascript (我使用javascript插入占位符)
由于3个div有相同的类，它们将显示所有块或所有内联，因此我只能在输入字段上工作。不幸的是，我尝试在输入字段中指定“内联块”，但它不起作用。
知道该怎么做吗？谢谢！
回答 4
Stack Overflow用户
发布于 2016-07-15 11:26:02
使用下面的CSS，以实现您的预期结果
.field{
display:inline;
}
#email_field{
display:block;
}显示:内联将允许在内联中显示所有字段，并在第三个字段上显示:块，使其成为块元素，并显示在单独的行中。
Stack Overflow用户
发布于 2016-07-15 11:36:04
如果您需要使用一组更复杂的字段来完成这一任务，我建议检查一下:nth- of -type()和:nth-child() 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>
Stack Overflow用户
发布于 2016-07-15 11:29:46
https://stackoverflow.com/questions/38403682
复制
相似问题
无法创建Keycloak 17.0.0管理用户
在keycloak和spring中管理用户权限
将管理页面限制为仅限管理用户使用
为非管理用户启用管理面板
是否可以将用户管理员限制为仅管理某些组的用户？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
