0

这是我的代码（请在此处查看小提琴）：

<h2>Icecream<a href='#' class='btn pull-right'><i class='icon-star'></i> Follow</a></h2>

问题（如红色背景所示）是pull-right按钮太高。我怎样才能让按钮与按钮的高度相同h2？

4

3 回答 3

1

我不完全确定你的意思，但我将它添加到 css 块中，如果有帮助，它会将按钮向下推到 H1 的中心：

.pull-right {
    margin-top: 5px;
}

我建议将你的 h1 和你的按钮分开放在一个 div 中。最好尽可能保持元素的对齐方式分开。

于 2013-02-22T16:39:19.730 回答
-1 
.btn.pull-right {
    position:relative;
    top:5px;
}
于 2013-02-22T16:44:28.143 回答
-2

如果您处于无法修改标记的情况，flexbox 可以做到这一点。我已经为所有应该能够执行此操作的浏览器添加了前缀（遵循 2009 规范的 FF 版本无法执行此操作，因为它们不会在文本周围插入匿名弹性项目框）。你可以自由地为那些不能做 flexbox 的浏览器保留浮动。

http://jsfiddle.net/deZet/31/

h2 {
  background-color: red;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

h2 a.btn.pull-right {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

http://caniuse.com/#search=flexbox

如果您愿意修改标记，使用 table/table-cell 也可以，但您需要摆脱浮动。

http://jsfiddle.net/deZet/34/

h2 {
    background-color: red;
    display: table;
    width: 100%;
}

h2 .cell {
    display: table-cell;
    vertical-align: middle;
}

h2 .cell:last-child {
    text-align: right;
    line-height: 1;
}

<h2><span class="cell">Icecream</span> <span class="cell"><a href='#' class='btn'><i class='icon-star'></i> Follow</a></span></h2>
于 2013-02-22T17:57:21.670 回答