web-dev-qa-db-ja.com

CSS：フロートなしで同じ行の左右に2つの要素を揃えます

2つのインライン要素を1つは左に、もう1つは右に配置しようとしています。フロートを使わずにこれを実現したい。

私の場合、スパンとリンクを持つh1があります。スパンを左に揃え、リンクを右に揃えたいのですが。

http://jsfiddle.net/Lkfacta3/

h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}
 <h1><span>Align me left</span> <a href="">align me right</a></h1>

これは望ましい結果です。

desired-result

htmlcsstext-align
10
Omar

あなたはいくつかのflexbox魔法を使うことができます：

h1 {
  display: flex;
  justify-content: space-between;
}
<h1>
  <span>Align me left</span>
  <a href="">align me right</a>
</h1>
27
Oriol

CSS display:table + display:table-cellを使用できます。

h1 {
  display: table;
  width: 100%;
  margin: 0;
}
h1>span {
  text-align: left;
  display: table-cell;
}
h1>a {
  text-align: right;
  display: table-cell;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>

または、display:inline-blockで実行します。

h1 {
  font-size: 0; /* remove whitespace */
}
h1>span,
h1>a {
  font-size: 32px;
  display: inline-block;
  width: 50%;
}
h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>

上記のいずれの方法でも、<a>のクリック可能な領域が大きくなります。修正する必要がある場合は、別の<span>にラップしてください。

6
Stickers

CSSテーブルを試して、アクティブ領域をテキストのみに拡張する場合は、リンクを処理するための予防策を講じることができます。

柔軟な設計でこれをどのように機能させるかによっては、フロートが実行可能なオプションになる場合があります。

h1 {
  display: table;
  width: 100%;
}
h1 span, h1 a {
  display: table-cell;
}
h1 span {
  text-align: left;
}
h1 a {
  text-align: right;
  border: 1px dotted blue;
  width: 1%;
  white-space: nowrap;
}
<h1><span>Align me left</span> <a href="">align me right</a></h1>
1
Marc Audet