2

メニュー ボタンのコンテナとして 3 つの div を設定しました。1 つはボタンをページの左側に配置し、もう 1 つは右側に配置し、最後の 1 つは両方の div の中間に配置します。これは、CSS で表示されるものです。

.actions {
    @include clearfix();
    .left {
        float: left;
        margin-left: $outside_margin;
        height: $actions_height;
        line-height: $actions_height;
    }
    .middle {
        text-align: center;
        margin-left: 0px auto;
        margin-right: 0px auto;
        height: $actions_height;
        line-height: $actions_height;
    }
    .right {
        float: right;
        margin-right: $outside_margin;
        height: $actions_height;
        line-height: $actions_height;
    }
}

これは非常にうまく機能します。今、テキストの単語と、時には画像を含む単純なボックス化されたボタンを作成する .button クラスを作成しようとしています。これは私のHTMLがどのように見えるかです。

<div class="actions">
    <div class="left">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>
    <div class="right">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>
    <div class="middle">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>          
</div>

私はたくさんのことを試しました。それらをテーブルセルで適切に動作させることはできませんでした。display:block ではフロートを再度使用する必要があり、中間ブロックとインラインブロックで適切な配置を取得する方法がわかりません-厄介なスペースがあることを除けば簡単に読める HTML を書くとき、それらの間で - 正しくするために多くの微調整が必​​要で、それは 1 つのボタン サイズだけでした。

私は非常に多くのことを試しましたが、何もうまくいかなかったので、私はただ迷っているところにいると思います. だから私はここに私の問題を投稿すると思った。

このプロジェクトを進める最善の方法は何ですか? 前もって感謝します。

4

2 に答える 2

0

table-cell を「機能」させることができなかった理由は、セル自体と同様にセルの内容を垂直方向に揃える必要があることに気付いていなかったためと思われます。

http://tinker.io/619bf/2

.actions {
    display: table;
    width: 100%;
}

.actions div {
    display: table-cell;
    border: 1px solid;
    vertical-align: middle;
    width: 33%
}

.actions div * {
    vertical-align: middle;
}
于 2013-04-28T11:57:25.293 に答える