17

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

5 回答 5

15

您可以只position:absolute在内联元素和position:relative容器上使用。然后，您可以按照您想要的方式相对于容器对齐内联元素。像这样的东西：

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

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

.inlineRight {
    right: 0;
}

演示

于 2013-07-21T15:36:08.027 回答
11

更新 -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：

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

祝你好运...

于 2017-11-23T10:05:52.310 回答
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>

于 2013-07-21T15:33:39.750 回答
3

将此添加到您的CSS

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

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

演示

于 2013-07-21T15:35:44.747 回答
3

你为什么要这样做？

您可以使用无序列表轻松获得相同的结果，而无需那些额外的 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;
}

演示

于 2013-07-21T15:41:38.160 回答