1

同じ線上に2つの要素を配置することは可能ですか？（タイトフィット）1つを80％の幅を使用し、もう1つを20％を使用するように設定しましたが、スペースに収まりませんか？

これが私が意味することですhttp://jsfiddle.net/NuZxj/

これは可能だと思いましたが、HTMLとCSSは初めてです。

4

5 に答える 5

3

これは2つの理由によるものです。最初：widthプロパティは要素の「合計幅」を設定しません。合計幅は、幅、境界線幅、およびパディングで構成されます。

次に、HTMLの2つの要素間の改行は単一の空白文字としてレンダリングされるため、20％と80％の合計は100％を超えます。

とはいえ、HTMLの同じ行に2つの要素を配置し、以下を使用すると、CSSで設定されたようbox-sizingに、border-widthとpaddingが要素のに含まれます（つまり、デフォルトでこの方法で計算されます） ）：：widthwidth

-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;

JSフィドルデモ。

inputまた、2つの要素の間にいかなる種類のスペースも存在しないようにHTMLが変更されていることにも注意してください。

于 2012-08-14T17:02:44.493 に答える
1

要素には境界線があり、幅が増えるのと同じ線上に配置されないようになっています。これを0に設定し、左にフロートさせます。デモ

#footer input[type=text]
{
    border: 0;
    float: left;
}

input.button {
    border: 0;
    float: left;
}​
于 2012-08-14T16:59:30.477 に答える
0

http://jsfiddle.net/NuZxj/13/

ボタンに追加float: right;して、divの右側に強制的に配置します。これにより、両方の要素が同じ行に配置されます。もちろん、これを右側に配置したくない場合は、正しく表示されません。

同じ行に収まるように、テキスト要素の幅も80％弱に変更したことに注意してください。

于 2012-08-14T16:57:31.547 に答える
0

確実なこと。

http://jsfiddle.net/NuZxj/7/

widthただし、HTML要素については、要素が占める実際のスペースに追加するものがあるため、常に単独で依存できるとは限りませmarginんborder。これは「ボックスモデル」と呼ばれ、ここで読むことができます： http://www.quirksmode.org/css/box.htmlまたはここ：http ： //www.w3.org/TR/CSS2/box .html

あなたの例でそれが意味することは、例えば、widthボタンの境界線のためのスペースを残さずに、100％を占めるということです—これがボタンが次の行にジャンプする理由です。

border、、paddingを削除するか、2つの要素のをmargin微調整することができます。width

于 2012-08-14T17:02:19.840 に答える
0

パディングやマージンが定義されているため、2つの要素は同じ行に収まりません。

これは、を意味し80% + 20% + margin + padding + border > 100%ます。

widthプロパティは、マージン、パディング、または境界線を考慮しません。

これを回避するには、マージン、パディング、および境界線をに設定するか0px、パーセンテージ幅をわずかに減らして補正するか、（最も複雑なオプション）入力を非表示のdivにラップして、代わりにその幅を設定します。 。

于 2012-08-14T17:04:43.817 に答える