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

6 54
html css margin css-float

6 ответов:

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

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

пример

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

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

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

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

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

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

3

С помощью дисплей: встроенный блок; и в более общем случае, когда у вас есть родитель (всегда есть родитель, кроме 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; - это то, что вам нужно, чтобы заставить их быть на одной линии. белый-пространство: без переноса; отключить обертывания. И overlow-x: auto; для активации прокрутки, когда элемент выходит за пределы рамки.

2

измените css, как показано ниже

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

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

1