CSS 将内联元素向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17773921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Inline Element to the Right
提问by Robert Peek
How to align two text elements, one to the left and the other to the right, also on the same line. I'm aware it can be done using floats but I would like a float less solution. I'm looking for a way to do it using display:inline.
如何在同一行上对齐两个文本元素，一个向左对齐，另一个向右对齐。我知道它可以使用浮点数来完成，但我想要一个少浮点数的解决方案。我正在寻找一种使用display:inline.
HTML:
HTML：
<div class="contailner">
<div class="inlineLeft">Item 1</div>
<div class="inlineRight">Item 2</div>
</div>
CSS:
CSS：
.container {
width: 600px;
border: 1px solid blue;
}
.inlineLeft, .inlineRight {
display: inline;
}
.inlineRight {
...align right...
}
回答by Martin Turjak
you could just use position:absoluteon the inline elements and position:relativeon the container. Then you can align the inline elements the way you want relative to the container. Something like this:
您可以position:absolute在内联元素和position:relative容器上使用。然后，您可以按照您想要的方式相对于容器对齐内联元素。像这样的东西：
.container {
position: relative;
width: 600px;
border: 1px solid blue;
}
.inlineLeft, .inlineRight {
position: absolute;
display: inline;
}
.inlineRight {
right: 0;
}
DEMO
演示
回答by Akash
UPDATE - 2019, April
更新 - 2019, April
We can also work with css flex.
我们也可以与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>PREVIOUS ANSWER
以前的回答
We can achieve this with display:table:
我们可以通过以下方式实现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>Good Luck...
祝你好运...
回答by Abdul Malik
回答by Wassim Taher
Why are you doing it like this?
你为什么要这样做？
You can easily have the same result with an un-ordered list without those extra divs.
您可以使用无序列表轻松获得相同的结果，而无需那些额外的 div。
Make sure you set the text-align property for the first list item to "left" (ul li:first-child), and set the text-align property for the other list items (ul li) to "right".
确保将第一个列表项的 text-align 属性设置为“left”（ul li:first-child），并将其他列表项（ul li）的 text-align 属性设置为“right”。
UPDATE - Here's the code for this as requested:
更新 - 这是请求的代码：
HTML
HTML
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
CSS
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;
}
回答by G-Cyrillus
You could use text-align:justify + after pseudo element to justify that first line:
您可以在伪元素之后使用 text-align:justify + 来对齐第一行：
http://codepen.io/anon/pen/JeAgk
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%;
}
If you use an extra empty element instead of pseudo-element, then you have a technic that is usable since text-align:justify exists, wich means compatible with any browsers.
如果你使用一个额外的空元素而不是伪元素，那么你有一个可用的技术，因为 text-align:justify 存在，这意味着与任何浏览器兼容。
