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

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

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

Ответ 1

Используя display:inline-block

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

Пример

Ответ 2

#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 и заполнением

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

Измените свой css ниже

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

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

Ответ 7

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

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

Отрегулируйте ширину и отступы в соответствии с вашими требованиями. Примечание. Не добавляйте "width" в целом более чем на 100% (ele1_width+ ele2_width), чтобы добавить "padding", оставьте его на уровне менее 100%.

Ответ 8

<style type="text/css">
.container{
display: flex;
}
</style>
<div class="container">
<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>
</div>