Як вирівняти два елементи в одному рядку, не змінюючи 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 пікселями відступів між ними. Проблема полягає в тому, що ширина елемента2 може змінюватися залежно від вмісту та браузера (розмір шрифту тощо), тому він не завжди ідеально вирівнюється з елементом1 (я не можу просто застосувати право поля та перемістити його)

Я також не можу змінити розмітку.

Чи існує єдиний спосіб їх вишикувати? Я спробував 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: авто; для активації прокрутки, коли елемент перевищує межу кадру.

У випадках, коли я використовую такі плаваючі елементи, мені зазвичай потрібно бути впевненим, що елемент контейнера завжди буде достатньо великим для ширини обох плаваючих елементів плюс бажане поле, щоб все вмістилося всередині нього. Найпростіший спосіб зробити це, очевидно, надати обом внутрішнім елементам фіксовану ширину, яка буде правильно розміщуватися всередині зовнішнього елемента, як це:

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