CSS顯示在輸入線（最後一個輸入寬度：100％）

我需要創建一個投入少一條線，以確保他們總是充滿DIV，我已經添加width:100%最後輸入CSS顯示在輸入線（最後一個輸入寬度：100％）

<div style="width:300px;background:#eee;height:30px"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <input value="last" style="width:100%" type="button"/> 
</div>

此示例不能正常工作，因爲最後一個輸入寬度與div相同，並且出現在第二行。

我該如何讓它們全部出現在同一行？

Jsfiddle

來源

2013-08-23 AMD

如果你事先知道容器的寬度，爲什麼要猜測最後一個'div寬度？ – melancia

爲什麼你不在控件之間劃分100％？ –

'width：100％'將給出容器的最後輸入100％寬度。你能爲所有輸入使用固定寬度嗎？ – SlightlyCuban

用一點CSS就可以做到這一點。包裹最後輸入的跨度，並添加這個CSS：

<div style="width:300px;background:#eee;height:30px;"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <span id="last"><input value="last" style="width:100%" type="button" /></span> 
</div> 
#last { 
    overflow:auto; 
    display:block; 
} 
input { 
    float:left; 
}

jsFiddle example

來源

2013-08-23 13:25:23 j08691

作品，謝謝 – AMD

這是完美的。我已經看了十幾個類似的問題和答案，一切都是這樣的：1）忽略了問題並以固定寬度回答，或者2）關於一個值得懷疑的CSS頁面。這是簡潔的，做了什麼需要，謝謝！ –

當使用寬度：100％，此填充包含輸入在div。讓它們都適合內部的最好方法是在輸入之間平均分配div寬度，並將它們浮動，以使它們全部坐在一起。

<div style="width:300px;background:#eee;height:30px"> 
<input value="first" style="width:100px, float: left;" type="button"/> 
<input value="second" style="width:100px" type="button"/> 
<input value="last" style="width:100px, float: right;" type="button"/> 
</div>

的語法可能不完全正確，我很少使用在線CSS，好得多隻是給輸入和類，然後在你的CSS文件屬性分配類。

來源

2013-08-23 13:24:25 user5623896726

另一個可行的選擇是在給定容器大小的情況下找到接近其80px值的百分比寬度，然後進行數學運算並給出剩餘空間的最後一個div。 – Michael

正確^ 你也可以使用em，但我只是在演示一種方法。 – user5623896726

你可以嘗試從按鈕

<div style="width:300px;background:#eee;height:30px"> 
    <input value="first" style="width:80px" type="button"/> 
    <input value="second" style="width:80px" type="button"/> 
    <input value="last" style="width:132px" type="button"/> 
</div>

來源

2013-08-23 13:28:04

填寫您的DIV如果你有N想要孩子爲了適合一些寬度，那麼你需要設置它們各自的寬度爲100%/N，這對於你的例子應該是100%/3〜33.33333％然而，（除非你有box-sizing: border-box/padding-box設置），您還需要考慮邊距，邊框和填充。此外，如果您的元素是display: inline或display: inline-block，它們之間的源空間也將佔用空間。你需要對付這種空白的

刪除它
與margin-right: -0.4em或工作
float你的元素我有updated your demo一些值（這實際上是設置display: block）

撤消它最快的解決方案，爲您提供您想要的結果。

來源

2013-08-23 13:29:42

CSS顯示在輸入線（最後一個輸入寬度：100％）

回答

相關問題