2つのインライン要素を1つは左に、もう1つは右に配置しようとしています。フロートを使わずにこれを実現したい。
私の場合、スパンとリンクを持つh1があります。スパンを左に揃え、リンクを右に揃えたいのですが。
h1>span {
text-align: left;
}
h1>a {
text-align: right;
}
<h1><span>Align me left</span> <a href="">align me right</a></h1>
これは望ましい結果です。
あなたはいくつかのflexbox魔法を使うことができます:
h1 {
display: flex;
justify-content: space-between;
}
<h1>
<span>Align me left</span>
<a href="">align me right</a>
</h1>
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>
にラップしてください。
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>