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

Question

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

<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 (но не смог заставить его работать).

Answer 1

Использование display:inline-block

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

Пример

Answer 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 и отступами

Answer 3

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

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

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

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

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

Answer 6

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

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

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

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