将内联元素对齐到右侧

Question

如何将两个文本元素对齐，一个在左边，另一个在右边，也在同一条线上。我知道可以使用浮点数来完成，但我想要一个不用浮点数的解决方案。我正在寻找一种方法，使用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...   
}

Answer 1

您可以在内联元素上使用position:absolute，在容器上使用position:relative。然后，您可以按照所需的方式将内联元素与容器对齐。像这样：

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

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

.inlineRight {
    right: 0;
}

DEMO

Answer 2

更新 - 2019, April

我们也可以使用css flex。

div.flex-box {
  display:flex;
  justify-content: space-between;
  border: 2px deeppink dashed;
}

<div class="flex-box">
<span>span element 1</span>
<span>span element 2</span>
</div>

<小时/>

以前的答案

我们可以使用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>

祝你好运......

Answer 3

将此添加到您的css

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

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

Demo

Answer 4

你为什么这样做？

对于没有这些额外div的无序列表，您可以轻松获得相同的结果。

确保将第一个列表项的text-align属性设置为“left”（ul li：first-child），并将其他列表项（ul li）的text-align属性设置为“right”

更新 - 以下是按要求提供的代码：

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

Answer 5

您可以使用text-align：justify + after伪元素来证明第一行：

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

如果你使用一个额外的空元素而不是伪元素，那么你有一个可用的技术，因为text-align：justify存在，这意味着与任何浏览器兼容。