17

同じ行にある 2 つのテキスト要素を、1 つを左に、もう 1 つを右に揃える方法。フロートを使用して実行できることは承知していますが、フロートの少ないソリューションが必要です。を使った方法を探してい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 に答える
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

単純なインライン要素の場合、nowdays は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>

また、最近

  • グリッド レイアウトを構築する場合に使用するflexspace-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 に答える