web-dev-qa-db-ja.com

HTMLを変更せずに2つの要素を同じ行に配置する方法

同じ行に2つの要素が左に浮かび、右に浮かんでいます。

<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

Element2は、element1の隣に2つの間に約10ピクセルのパディングを配置する必要があります。問題は、element2の幅がコンテンツとブラウザー（フォントサイズなど）に応じて変化する可能性があるため、element1と常に完全に揃っているとは限らないことです（右マージンを適用して上に移動することはできません）。

マークアップも変更できません。

それらを揃える均一な方法はありますか？パーセンテージでマージンを右に試し、element2を近づけるためにelement1にマイナスのマージンを試しました（ただし、動作させることができませんでした）。

htmlcsscss-floatmargin
66
user1074378

display:inline-blockを使用する

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;}

例

135
Sameera Thilakasiri
#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}

フィドル： http://jsfiddle.net/sKqZJ/

または

#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}

フィドル： http://jsfiddle.net/sKqZJ/1/

または

#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}

フィドル： http://jsfiddle.net/sKqZJ/2/

または

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

フィドル： http://jsfiddle.net/sKqZJ/3/

参照： CSSマージンとパディングの違い

17
dku.rajkumar
<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>
8
Taras S.

display：inline-block;を使用することにより、より一般的には、親がある場合（常にhtml以外の親が存在する場合）、内部要素にdisplay: inline-block;を使用します。また、ウィンドウが縮小（縮小）した場合でも、強制的に同じ行に留まるようにします。親に2つのプロパティを追加します。

    white-space: nowrap;
    overflow-x: auto;

ここでそれを明確にするためのよりフォーマットされた例：

.parent {
    white-space: nowrap;
    overflow-x: auto;
}

.children {
   display: inline-block;
   margin-left: 20px; 
}

特にこの例では、上記を仲間として適用できます（親が本文であると仮定します。適切な親を配置しない場合）。htmlを変更し、可能であれば親を追加することもできます。

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
        white-space: nowrap;
        overflow-x: auto;
 }

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
   display: inline-block;
   margin-left: 10px; 
}

white-space: nowrap;とoverlow-x: auto;は、強制的に1行にするために必要なものです。空白：nowrap;ラッピングを無効にします。 overlow-x：auto;要素がフレーム制限を超えたときにスクロールを有効にします。

5
Mohamed Allal

そのようなフロート要素を使用する場合、通常、コンテナ要素は、両方のフロート要素の幅に加えて、その中にすべて収まるように必要なマージンを確保するのに十分な大きさである必要があります。これを行う最も簡単な方法は、明らかに、次のように外側の要素の内側に正しく収まる固定幅を両方の内側の要素に与えることです。

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

これがスケーリング幅レイアウトであるためにそれができない場合、別のオプションは、寸法のすべてのセットを次のようなパーセンテージにすることです。

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

これは、次のようなものが必要な場合には注意が必要です。

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

そのような場合には、フロートを使用せずに相対/絶対配置を使用して同じ効果を得ることが最良の選択肢であることがあります。

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

これはフロートソリューションではありませんが、同じ高さの列が並んで表示され、一方は静的な幅を持ちながら流動性を維持できます。

3
Code Junkie

以下のようにCSSを変更してください

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;}

ここにJSFiddleがあります http://jsfiddle.net/a4aME/

2
Pavan

これは、私があなたと似たタイプのユースケースに使用したものです。

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

必要に応じて幅とパディングを調整します。注-「パディング」を追加するために「幅」を100％（ele1_width + ele2_width）を超えて超えないでください。100％未満に保ちます。

0
Abhishek Kumar