Выровнять встроенный элемент вправо

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

HTML:

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>

CSS

.container {
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    display: inline;
}

.inlineRight {
    ...align right...   
}

Ответы

Ответ 1

вы можете просто использовать position:absolute для встроенных элементов и position:relative в контейнере. Затем вы можете выровнять встроенные элементы так, как вы хотите относительно контейнера. Что-то вроде этого:

.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft, .inlineRight {
    position: absolute;
    display: inline;
}

.inlineRight {
    right: 0;
}

DEMO

Ответ 2

Почему вы так делаете?

Вы можете легко получить тот же результат с неупорядоченным списком без этих дополнительных div.

Убедитесь, что свойство text-align для элемента первого списка "left" (ul li: first-child), и установите свойство text-align для других элементов списка (ul li) в "right".

UPDATE - здесь код для этого по запросу:

HTML

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

CSS

ul{
padding: 0 0;
margin: 0 0;
list-style: none;
width: 600px;
border: 1px solid blue;
height: 30px;
}

ul li{
width: 300px;
display: block;
float: left;
text-align: right;
line-height: 30px;
}

ul li:first-child{
text-align: left;
}

DEMO

Ответ 3

добавьте это в свой css

.inlineLeft, .inlineRight {
    display: inline-block;
}

.inlineRight {
   display:inline-block;
    position:absolute;
    right:0;
    margin-right:8px;
}

Демо

Ответ 4

Вы можете использовать text-align: justify + после псевдоэлемента, чтобы оправдать эту первую строку:

http://codepen.io/anon/pen/JeAgk

.contailner {
  line-height:0;
  text-align:justify;
}
.contailner > div {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:100%;
}

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

Ответ 5

Мы можем достичь этого с помощью `display:table`:

.contailner {
  border:2px blue dashed;
  display:table;
  width:100%;
  /*MARGIN (NOT REQUIRED)*/
  margin:auto;
  margin-top:100px;
  width:500px;
}
.inlineRight {
  display:table-cell;
  text-align:right;
}
.inlineLeft {
  display:table-cell;
  text-align:left;
}

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>