logo标签列表

将内联元素右对齐

css
19

如何将两个文本元素对齐，一个在左边，另一个在右边，并且在同一行上。我知道可以使用浮动来完成，但我想要一种不使用浮动的解决方案。我正在寻找一种使用 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...   
}
3
你需要使用 inline-block，然后尝试调整边距即可。 - Matt Whipple
5个回答
16

你可以在行内元素上使用position:absolute，在容器上使用position:relative，然后相对于容器对齐行内元素。可以这样做：

你可以在行内元素上使用position:absolute，在容器上使用position:relative，然后相对于容器对齐行内元素。可以这样做：
.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

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

.inlineRight {
    right: 0;
}

演示

12
仔细查看您的演示文稿，您会发现容器的“height”为0，这显然是有问题的。容器的高度应该包含其元素。 - Domi
12

更新- 2019年4月

我们还可以使用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来实现：

.container {
    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="container">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>

祝你好运...

3
您可以使用text-align:justify +伪元素来对齐第一行： http://codepen.io/anon/pen/JeAgk 

.contailner {
  line-height:0;
  text-align:justify;
  background:lightgray;
  margin:1em;
}
.contailner > * {
  display:inline-block;
  line-height:1.2em;
}
.contailner:after {
  content:'';
  display:inline-block;
  width:99%;
  vertical-align:top;/* or bottom to swallow last gaps */
}

/* some extra possibilities */
ul {padding:0;margin:0;}
.w3 {padding-left:1%;}
.w3 .box {margin:1% 1% 1% 0; border:solid;width:31%;text-align:center;box-shadow:0 0 5px;}
.w3 .w5 {width:48%;}
.w3 .w15 {width:14%;}
.w3 .w25 {width:23%;}
<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
    <span>Item 1</span>
    <span>Item 2</span>
  <span>Item 3</span>
</div>
<ul class="contailner">
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
</div>
<div class="contailner w3">
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
    <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
      <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w5">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w15">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
        <div class="box w25">
      <header>header</header>
      <article>Article</article>
      <footer>footer</footer>
  </div>
</div>

.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存在，这意味着与任何浏览器兼容。

2020年编辑

对于简单的内联元素，现在，text-align-last可以与所有浏览器一起使用，伪元素可以被删除。

.contailner {
  text-align: justify;
  text-align-last: justify;
  background: lightgray;
  margin: 1em;
}

.contailner>* {
  display: inline-block;
}


/* some extra possibilities */

ul {
  padding: 0;
  margin: 0;
}

.w3 {
  padding-left: 1%;
}

.w3 .box {
  margin: 1% 1% 1% 0;
  border: solid;
  width: 31%;
  text-align: center;
  box-shadow: 0 0 5px;
}

.w3 .w5 {
  width: 48%;
}

.w3 .w15 {
  width: 14%;
}

.w3 .w25 {
  width: 23%;
}
<div class="contailner">
  <div class="inlineLeft">Item 1</div>
  <div class="inlineRight">Item 2</div>
</div>
<div class="contailner">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<ul class="contailner">
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
  <li><a href="#">link item</a></li>
</ul>
<div class="contailner w3">
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
</div>
<div class="contailner w3">
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w5">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w15">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
  <div class="box w25">
    <header>header</header>
    <article>Article</article>
    <footer>footer</footer>
  </div>
</div>

另外，现在有 flex 和 space-between 可以轻松地完成这项任务并用于构建网格布局。

  • text-align/text-align-last 应仅用于其原始目的：文本对齐，而非解决其他问题的变通方法。

那么，你会选择哪种导航方式呢？

.txt {
  text-align-last: justify
}
/* or ? */
.flx {
  display: flex;
  justify-content: space-between;
}
<nav class="txt">
  <a href="">Link</a> <a href="">Link</a> <a href="">Link</a>
</nav>
<nav class="flx">
  <a href="">Link</a> <a href="">Link</a> <a href="">Link</a>
</nav>

1
灵活的，这种技术也可以轻松构建网格系统。 - G-Cyrillus
3
将以下内容添加到你的CSS中：
.inlineLeft, .inlineRight {
    display: inline-block;
}

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

Demo

那让我朝着正确的方向前进了。如果我在容器元素上添加position:relative，inlineRight将右对齐容器元素，这正是我想要的。但是，如果我在容器上添加padding:8px，则inlineRight元素上没有右边缘填充。你有没有办法在不更改right:0的情况下修复它？可能还有另一个示例可以使inlineRight保持在流中。使用position:absolute会将该元素移出流程。 - Robert Peek
在更新的演示中，你可以看到在 .inlineLeft 和 .inlineRight 中添加 margin-right:8px。 - Abdul Malik
看起来还不错，但我有点问题。你能帮我解决一下吗？为什么在 这个更新的 fiddle 中的图片下面会有一个任意的4.182像素的间隙，尽管它没有被任何 CSS 支持？ - Domi
3

为什么你要这样做？

你可以使用无序列表轻松地获得相同的结果，而不需要那些额外的div。

确保将第一个列表项（ul li:first-child）的text-align属性设置为“left”，并将其他列表项（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

这将它们左右对齐，但在两行上。我需要让每个li显示为inline吗？ - Robert Peek
是的，我忘了提到：请在（ul li）CSS级别上添加属性“float”等于“left”。相信我，这是正确的方法。你不应该使用Divs来做这件事。 - Wassim Taher
如果你还有疑问，请告诉我，我会为你创建一个fiddle。 - Wassim Taher
我认为我理解你告诉我的要做什么，但它没有起作用。请创建一个fiddle，谢谢。此外，如果一个元素浮动了子元素，那么你应该浮动父元素，这样父元素就不会折叠。 - Robert Peek
这仅适用于文本。对于任意元素，它不起作用，因为高度未设置。是否有一种方法可以修复任意高度的非文本元素？此fiddle说明了问题。 - Domi
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接