2013-08-23 13 views
5

は、私は最後の入力CSS表示入力(最後の入力幅:100%)私はいくつかの入力を持つ行を作成するために、彼らはいつものdivを記入してくださいする必要が

<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> 
width:100%を追加しました

最後の入力幅がdivと同じで、2行目に表示されるため、このサンプルは正常に動作しません。

どうすれば同じ行に表示させることができますか?

Jsfiddle

+1

コンテナ 'width'をあらかじめ知っているなら、なぜ最後の' div width'を推測しようとしますか? – melancia

+2

なぜコントロール間で100%を分割しないのですか? –

+0

'width:100%'はコンテナの最後の100%の幅を与えます。すべての入力に固定幅を使用できますか? – SlightlyCuban

答えて

14

少しの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

+0

作品、ありがとうございます – AMD

+1

これは完璧です。私はダース同様の質問と答えとすべてを見てきた:1)質問を無視し、固定幅で答えた、または2)疑わしいCSSのページの価値についてだった。これは簡潔で正確に何が必要なのですか、ありがとう! –

1

あなたが幅を使用する場合: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ファイルの属性を持つクラスを割り当てるオフはるかに良いです。

+0

別の実行可能なオプションは、コンテナのサイズを指定して80pxの値に近似したパーセンテージの幅を見つけ、次に計算を行い、最後のdivに残りのスペースを与えます。 – Michael

+0

まったく^ emも使えますか?私はちょうど方法をデモしていました。 – user5623896726

0

あなたはあなたが欲しいN子供を持っている場合は、ボタン

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

からあなたのdivを埋めるために試すことができます幅に合わせてレンダリングするには、それぞれの幅を100%/Nに設定する必要があります。これは、例として100%/3〜33.33333%になります。ただし、box-sizing: border-box/padding-boxが設定されている)、マージン、ボーダー、パディングも考慮する必要があります。さらに、要素がdisplay: inlineまたはdisplay: inline-blockである場合、ソース内のそれらの間の空白もスペースを占有します。あなたは私がupdated your demoをした

(実際display: blockを設定する)

  • floatあなたの要素を作品margin-right: -0.4emか、いくつかの値とそれを元に戻す
  • それを削除

    • することによって、この空白に対抗する必要がありますあなたが望む結果をもたらす最速のソリューションです。

  • 関連する問題