CSS強制內聯輸入字段

Question

我有以下代碼，我無法訪問HTML進行編輯。

<form> 
    <div class="LoginDiv"> 
     <input type="text" name="user_login" tabindex="1" placeholder="Email"/> 
    </div> 
    <div class="LoginDiv"> 
     <input type="password" name="user_password" tabindex="2" placeholder="Password" /> 
    </div> 
    <button type="submit">LOGIN</button> 
</form> 

根據圖像顯示。

我能夠訪問CSS，我希望能夠迫使輸入字段，以便他們是內聯。

這可能嗎？

感謝，

約翰

Answer 1

下面是你需要什麼，我猜

.LoginDiv { 
    display: inline-block; 
} 

https://jsfiddle.net/21o0uL52/

Answer 2

你只必須使用顯示：內聯。 EDITED

div{ 
 
    display: inline; 
 
}

<form> 
 
    <div class="LoginDiv"> 
 
     <input type="text" name="user_login" tabindex="1" placeholder="Email"/> 
 
    </div> 
 
    <div class="LoginDiv"> 
 
     <input type="password" name="user_password" tabindex="2" placeholder="Password" /> 
 
    </div> 
 
    <button type="submit">LOGIN</button> 
 
</form>

JSFIDDLE

Answer 3

，您可以給float: left到類這些div的的，是這樣的：

.LoginDiv { 
 
    float: left; 
 
}

<form> 
 
    <div class="LoginDiv"> 
 
    <input type="text" name="user_login" tabindex="1" placeholder="Email" /> 
 
    </div> 
 
    <div class="LoginDiv"> 
 
    <input type="password" name="user_password" tabindex="2" placeholder="Password" /> 
 
    </div> 
 
    <button type="submit">LOGIN</button> 
 
</form>

jsFiddle

Answer 4

您可以輸入使用float:left和DIV與class submit添加的按鈕。通過使用clear:both避免float

form input{ 
 
float:left; 
 
} 
 
.submit{ 
 
    clear:both; 
 
}

<form> 
 
    <div class="LoginDiv"> 
 
     <input type="text" name="user_login" tabindex="1" placeholder="Email"/> 
 
    </div> 
 
    <div class="LoginDiv"> 
 
     <input type="password" name="user_password" tabindex="2" placeholder="Password" /> 
 
    </div> 
 
    <div class="submit"><button type="submit">LOGIN</button></div> 
 
</form>

Answer 5

您可以使用內嵌表和表單元格。

display:inline-table; 

見小提琴 https://jsfiddle.net/mLjh8230/