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包围，所以它们显示在块中：http://jsfiddle.net/k2Nqp/159/ 我需要显示2个第一个字段＆＃34; inline＆＃34;而不是阻挡，第三个阻挡。

如果你把＆＃34;显示：inline-block＆＃34;很容易在div里面。但这里棘手的部分是，我对这个HTML代码没有任何控制权，因为它是由短代码自动生成的。我可以添加CSS，使用现有的类，甚至是javascript（我使用javascript插入占位符）

由于3个div具有相同的类，它们将显示所有块或所有内联，因此我只能处理输入字段。不幸的是，我试过指定＆＃34; inline-block＆＃34;到输入字段，它不起作用。

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

Answer 1

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

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

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

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

Answer 2

如果您需要使用更复杂的字段集，我建议您查看：nth-of-type（）和：nth-child（）css选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

可以使用nth-child（）选择器来对齐你的div

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

Fiddle link

Read about nth-child

Answer 4

以下CSS规则将选择除最后一个字段类别之外的所有元素，并应用值display的{{1}}样式。

inline-block

如何显示内联＆＃34;输入＆＃34;元素，被div包围

4 个答案: