0

これが私の目標を示す画像です。

http://imgur.com/80v5bRk

このようなスタイルを実現するにはどうすればよいでしょうか? これにより、ボタンの間隔と位置が完全に中央に配置されるようにルールを設定するにはどうすればよいかを尋ねています (現在は正しく配置されていません)。全体をまとめる div、最初のアングルとタイトルを保持する左側に浮かぶ div、アイコンを保持する左側に浮かぶ 2 つ目の div を考えていました。アイコンは font-awesome パッケージのもので、正しく配置する方法がわかりません。

4

2 に答える 2

0

まあ、あなたが現在持っているものを投稿しない限り、正確に答えるのは難しいです.
ただし、正しい軌道に乗っています。

私がすること：

  • 全体をdivでラップします（あなたが言ったように）
  • テキストを左に浮かせます（あなたもそう言いました）
  • アイコンを右にフロート(左ではなく)

間隔に関しては、2 つのボタンの左右にマージン/パディングを配置します。

編集：
Luiz Bertiとの私の議論によると：

あなたはほとんど正しいです。
代わりにこれを試してください: http://jsfiddle.net/GYPK5/1/

HTML

<div class="bar">
    <div class="text">Lots of stuff here</div>
    <div class="buttons">
        <img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
        <img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS

.bar {
    width: 400px;
    border: 1px solid black;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
}
.text {
    margin-left: 20px;
    float: left;
    width: 200px;
}
.buttons {
    float: right;
    margin-right: 20px;
    position: relative;
    top: 2px;
}
.buttons img {
    margin: 0 10px;
}
.clear {
    clear: both;
    width: 0;
    height: 0;
}
于 2013-07-21T22:39:35.417 に答える
0

これに沿って何かを行う必要があります：

HTML:

<div class="bar">
    <div class="first button"></div>
    <dic class="second button"></div>
</div>

CSS:

.bar{
    width: 960px;
    height: 60px;
    margin: 0 auto 0 auto;
    padding: 5px;
}

.button {
    width: 50px;
    height: 100%;
    float: right;
    margin-right: 10px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: center; /* This is what will centralize it vertically and horizontally */
}

.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }

これが役に立ったことを願っています。

于 2013-07-21T22:50:11.317 に答える