將一個元素從其正常的左邊放置到最右邊的位置

我有這http://jsfiddle.net/Gqufq/我想將第二個輸入放在第一個右邊（在同一行中），並將它結束到div的右邊。將一個元素從其正常的左邊放置到最右邊的位置

如何用CSS做到這一點，而不是在第一個輸入上放置明確的維度？（另外，在div可以具有可變寬度）

div { width: 200px; background-color: gray; } 

<div> 
    <input size="5" /> 
    <input /> 
</div>

來源

2013-07-12 Adriano dos Santos Fernandes

到目前爲止，沒有任何解決方案是有效的。我只想讓第二個輸入從當前默認位置向右流動。如果我增加div寬度，它必須繼續正確地執行此操作。 –

確保你測試了正確的jsfiddleS並且不要混淆;） –

附加size屬性到第二輸入框也。

來源

2013-07-12 12:35:03

+1你明白了:) – Praveen

不，他沒有問題。 –

更改第二個輸入的position: absolute。 JSFiddle

但它看起來不好看。所以改變的div爲width: 100%

來源

2013-07-12 12:36:02 Praveen

只是不按預期工作。 –

這是小提琴爲你工作http://jsfiddle.net/Gqufq/8/ – Praveen

也不知道你想移動第二個div到最右邊，但試試這個http://jsfiddle.net/Gqufq/10/ – Praveen

寬度試試這個

http://jsfiddle.net/Gqufq/1/

div { width: 200px; 
background-color: gray; 
display:inline; 
padding:5px; }

來源

2013-07-12 12:36:47 falguni

這會使默認輸入寬度影響div寬度，而不是相反。 –

使用浮動TECHNIC和標籤將做到這一點：http://jsfiddle.net/H3YQ3/1/，http://jsfiddle.net/H3YQ3/2/

div { 
    width: 200px; 
    background-color: gray; 
    margin:1em; 
} 
label { 
    display:block; 
    overflow:hidden; 
} 
label:first-child { 
    float:left; 
    width:50px; 
} 
input { 
    display:block; 
    width:100%; 
    box-sizing:border-box; 
} 
.big { 
    width:400px; 
}

來源

2013-07-12 12:50:56

擴展div寬度沒有我想要的效果。 –

沒有div被擴展，它仍然是你設置的200px，你是什麼意思？我明白，每一邊都有一行1的輸入。 ypour 200px首先不夠寬，無法容納2個輸入。您缺少所示代碼的清晰度和效果。 ;） –

我仍然相信第一個答案是你尋找的那個：http://jsfiddle.net/Gqufq/6/確保你測試了正確的jsfiddle :)對齊和浮動具有相同的限制：div的寬度或輸入必須進行控制，以便輸入有足夠空間站在最大或最小寬度的一行上，具體取決於您想要控制的內容。 –

將一個元素從其正常的左邊放置到最右邊的位置

回答

相關問題