Как выровнять два элемента в одной строке без изменения HTML

У меня есть два элемента в одной строке, плавающие влево и вправо.

<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 с отступом примерно 10 пикселей между ними. Проблема в том, что ширина element2 может меняться в зависимости от содержимого и браузера (размер шрифта и т. Д.), Поэтому он не всегда идеально совпадает с element1 (я не могу просто применить margin-right и переместить его).

Я тоже не могу поменять разметку.

Есть ли единый способ выстроить их в ряд? Я попробовал margin-right с процентом, я попробовал отрицательное поле element1, чтобы приблизить element2 (но не смог заставить его работать).

С помощью display:inline-block

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

пример

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

скрипка: 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 и заполнением

Используя display: inline-block; И в более общем плане, когда у вас есть родитель (всегда есть родитель, кроме html), используйте display: inline-block;внутренние элементы. и заставить их оставаться в одной строке, даже когда окно сжимается (сжимается). Добавьте для родителя два свойства:

    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; чтобы активировать прокрутку, когда элемент превышает ограничение кадра.

В тех случаях, когда я использую подобные плавающие элементы, мне обычно нужно быть уверенным, что контейнерный элемент всегда будет достаточно большим для ширины обоих плавающих элементов плюс желаемый запас, чтобы все помещалось внутри него. Самый простой способ сделать это, очевидно, - задать обоим внутренним элементам фиксированную ширину, которая будет правильно помещаться внутри внешнего элемента, например:

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

Хотя это не плавающее решение, оно приводит к появлению расположенных рядом столбцов одинаковой высоты, и один может оставаться плавным, в то время как другой имеет статическую ширину.

Измените свой CSS, как показано ниже

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

Вот JSFiddle http://jsfiddle.net/a4aME/

Это то, что я использовал для подобного типа использования, что и ваш.

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