12

1行で表示しようとしています：

  • 収容ボックスの左側に配置されたH1要素
  • 収容ボックスの右側に配置されたいくつかの「ボタン」（ここでは要素）
  • すべて同じベースライン上にある

最小限のマークアップ（つまり、ラッピング要素なし）で、正確な高さ、行の高さ、マージントップなどを設定することなく、これを行うことは可能ですか？

<div id="block1">
    <h1>What a great title</h1>
    <a href="javascript:void(0)">This link can kill you</a>
    <a href="javascript:void(0)">Click if you dare</a>
</div>

ここでのフィドルは、2つの互換性のない方向（インラインブロックであり、右に揃えることができず、右に浮くことができず、垂直に揃えることができない）であると私が感じるものを示しています：http： //jsfiddle.net/GlauberRocha/bUsvX/

何か案が？

4

5 に答える 5

11

私はかなり前に自分のサイトでこれを行いました。左側に h2、右側にボタンです。スクリーンショット:

コード：

<div id="side_bar" class="clearfix">
  <h2 style="float: left;">Charity Map</h2>
  <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
于 2012-11-01T15:15:15.900 に答える
6

そのレイアウトには潜在的な問題があります。レイアウトH1が長すぎてボタンも長すぎる場合はどうでしょうか? 彼らはお互いにぶつかります。このため、単純な CSS では対応できません - CSS はそのような魔法を行いません - 上記の問題に対する何らかの解決策を暗示する必要があります。

ただし、必要なことは、絶対配置を使用して簡単に実現できます。

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

生成されたコンテンツによっては、ヘッダーとアンカー コンテナーが相互に衝突する可能性があることが本当に心配な場合は、CSSmax-widthとoverflowプロパティを使用して、それらを含むボックスを適切な値に制限できます。オーバーフローしたコンテンツは非表示になりますが、少なくともレイアウトが視覚的に崩れることはありません。上記のコードの次の変更（重複を許してください）が目的に役立つと思います：

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

最後に、単純な CSS プロパティの組み合わせを使用してこれを実現することはできません。CSS (および HTML) では、コンテンツが左から右、上から下に流れるか、絶対配置または固定配置になって流れを中断するためです。とにかく、それは同じラインに留まることを望んでおらず、レイアウト デザイナーとして、各方向から走っている 2 つの列車が互いに前面衝突した場合にどうするかなど、そのようなレイアウトが導入するであろうあいまいさを解決する必要があります :- )

于 2012-09-20T11:19:00.897 に答える
0

ラッピング要素や固定値なしで達成するのは難しいです...

見出しとリンクの両方に固定の行の高さを追加すると、問題がかなり迅速に解決されます。

  • リンクを「display:block;」に合わせます。float:right' を右に。
  • 「line-height: 40px;」を設定します。見出しとリンクの両方に

動作するはずですが、見出しのサイズが変わらない場合のみ....

于 2012-09-20T11:22:16.923 に答える
-1

私は同じ問題を抱えていました.. display:inlineh1に追加してから、ボタンに追加します:float:right; display:inline;

例 ( Twitter Bootstrapを使用):

<h2 style="display:inline">Users</h2>

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a>

<form style="display:inline; float:right;">
   <input type="text" class="input-medium search-query" name="search">
   <button class="btn" type="submit">Search</button>
</form>
于 2012-09-20T10:55:07.080 に答える