如何顯示內聯「輸入」元素，通過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的

回答

相關問題