0

这是说明我的目标的图像：

http://imgur.com/80v5bRk

实现这种风格的最佳方法是什么？通过这个，我问，我怎样才能设置规则，以便按钮的间距和位置在中心完全对齐（它们现在没有正确对齐）。我在想一个将整个东西包裹在一起的 div，一个向左浮动的 div 持有第一个角度和标题，以及一个向左浮动的持有图标的第二个 div。这些图标来自 font-awesome 包，我不明白如何正确对齐它们。

4

2 回答 2

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 回答
0

好吧，除非您发布您当前拥有的内容，否则很难准确回答。
但是，你在正确的轨道上。

我会做什么：

  • 将整个东西包装在一个 div 中（如您所说）
  • 将文本向左浮动（您也说过）
  • 使图标向右浮动（不是向左）

至于间距，在两个按钮的左/右放置一个边距/填充。

编辑：
根据我与 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 回答