So richten Sie zwei Elemente in derselben Zeile aus, ohne HTML zu ändern

Ich habe zwei Elemente auf derselben Linie, die nach links und rechts schwebten.

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

Ich brauche, dass Element2 neben Element1 mit ungefähr 10 Pixel Abstand zwischen den beiden ausgerichtet wird. Das Problem ist, dass sich die Breite von Element2 je nach Inhalt und Browser (Schriftgröße usw.) ändern kann, sodass sie nicht immer perfekt mit Element1 übereinstimmt (ich kann nicht einfach einen rechten Rand anwenden und ihn verschieben).

Ich kann das Markup auch nicht ändern.

Gibt es eine einheitliche Möglichkeit, sie auszurichten? Ich habe versucht, Rand-Recht mit einem Prozentsatz, ich habe einen negativen Rand für Element1 versucht, um Element2 näher zu bringen (konnte es aber nicht zum Laufen bringen).

Verwenden von display:inline-block

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

Beispiel

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

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

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

Geige: http://jsfiddle.net/sKqZJ/

oder

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

Geige: http://jsfiddle.net/sKqZJ/1/

oder

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

Geige: http://jsfiddle.net/sKqZJ/2/

oder

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

Geige: http://jsfiddle.net/sKqZJ/3/

Referenz: Der Unterschied zwischen CSS-Rändern und Polsterung

Durch Verwendung von display: inline-block; Und allgemeiner, wenn Sie ein Elternteil haben (es gibt immer ein Elternteil außer HTML), verwenden Sie display: inline-block;für die inneren Elemente. und sie zu zwingen, in derselben Linie zu bleiben, selbst wenn das Fenster geschrumpft ist (zusammengezogen). Fügen Sie für das übergeordnete Element die beiden Eigenschaften hinzu:

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

hier ein formatierteres Beispiel, um es klar zu machen:

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

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

Insbesondere für dieses Beispiel können Sie das oben Gesagte als Fellow anwenden (ich nehme an, das Elternteil ist ein Körper. Wenn Sie nicht das richtige Elternteil angeben), können Sie auch gerne das HTML ändern und ein Elternteil für sie hinzufügen, wenn dies möglich ist.

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

Denken Sie daran white-space: nowrap;und overlow-x: auto;ist das, was Sie brauchen, um sie zu zwingen, in einer Zeile zu stehen. Leerraum: Nowrap; Wickeln deaktivieren. Und overlow-x: auto; um das Scrollen zu aktivieren, wenn das Element die Rahmengrenze überschreitet.

In Fällen, in denen ich solche schwebenden Elemente verwende, muss ich normalerweise sicherstellen, dass das Containerelement immer groß genug für die Breite beider schwebenden Elemente plus den gewünschten Rand ist, damit alle hineinpassen. Der einfachste Weg, dies zu tun, besteht offensichtlich darin, beiden inneren Elementen feste Breiten zu geben, die wie folgt korrekt in das äußere Element passen:

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

Wenn Sie dies nicht tun können, weil dies ein Layout für die Skalierungsbreite ist, können Sie auch festlegen, dass jeder Satz von Dimensionen Prozentsätze wie:

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

Dies wird schwierig, wenn Sie so etwas brauchen:

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

In solchen Fällen ist es manchmal die beste Option, keine Floats zu verwenden und die relative / absolute Positionierung zu verwenden, um den gleichen Effekt wie folgt zu erzielen:

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

Dies ist zwar keine schwimmende Lösung, führt jedoch zu Spalten nebeneinander, bei denen sie dieselbe Höhe haben, und eine kann flüssig bleiben, während die andere eine statische Breite aufweist.

Ändern Sie Ihre CSS wie unten

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

Hier ist die JSFiddle http://jsfiddle.net/a4aME/

Dies ist, was ich für einen ähnlichen Anwendungsfall wie Ihren verwendet habe.

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

Passen Sie Ihre Breite und Polsterung an Ihre Anforderungen an. Hinweis - Überschreiten Sie 'width' nicht mehr als 100% (ele1_width + ele2_width), um 'padding' hinzuzufügen, und halten Sie es unter 100%.