HTMLを変更せずに2つの要素を同じ行に揃える方法

Question 1

同じ行に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と完全に一致するとは限らないことです（マージンを右に適用して移動することはできません）。

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

それらを並べる統一された方法はありますか？パーセンテージでmargin-rightを試し、element1で負のマージンを試し、element2を近づけました（ただし、機能させることができませんでした）。

Question 2

使用する display:inline-block

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

例

Question 3

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

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>

Question 4

#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マージンとパディングの違い

Question 5

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;はあなたがそれらを一列に強制するために必要なものです。空白：nowrap; 折り返しを無効にします。そしてoverlow-x：auto; 要素がフレーム制限を超えたときにスクロールをアクティブにします。

Question 6

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

#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;}

これはフロートソリューションではありませんが、同じ高さの列が並んでいるため、一方は流動性を保ち、もう一方は静的な幅になります。

Question 7

以下のようにCSSを変更します

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

これがJSFiddlehttp ： //jsfiddle.net/a4aME/です。

Question 8

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

<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％未満に保ちます。