it-swarm.com.ru

Как выровнять два элемента на одной строке без изменения 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 (но не смог заставить его работать).

66
user1074378

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

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

Пример

135
Sameera Thilakasiri
#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 и отступами

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

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>  
8
Taras S.

Используя 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
Mohamed Allal

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

#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
Code Junkie

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

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

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

2
Pavan

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

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

0
Abhishek Kumar