Question

如果我们查看我的site，我们会看到带有喜欢和不喜欢按钮的图标不在正确的位置。我希望它位于文字evaluate tekkkz.com和XX total views上方的右侧。这就是我的HTML：

<div id="bar">
  <span>evaluate<br><a href="../../">tekkkz.com</a></span>
  <a class="icon-small" id="like"></a>
  <a class="icon-small" style="margin: 0 0" id="dislike"></a>
  <br>
  <span id="views"></span>
</div>

这里有一些CSS：

.icon-small {
    display: block;
    position: absolute;
    height: 32px;
    width: 32px;
    text-indent: -9999em;
    margin: 0 0.5em;
}
#bar span {
    float: none;
    padding: 0 0.2em;
    vertical-align: middle;
}
#bar {
    right: 70px;
    top: 1em;
    position: absolute;
    font-size: 0.7em;
}

那有什么不对？

Answer 1

我重写了HTML。并非所有更改都是解决您的问题所必需的，但我认为将您的元素设为div而不是使用<br />的跨度更好。像这样的硬编码中断使得使用CSS控制换行更加复杂。我还发现在一个div中将喜欢/不喜欢的按钮分组更容易。

<div id="bar">
  <div class="evaluate">evaluate<br><a href="../../">tekkkz.com</a></div>
  <div class="likeButtons">
      <a class="icon-small" id="like"></a>
      <a class="icon-small" style="margin: 0 0" id="dislike"></a>
  </div>
  <div id="views"></div>
</div>

然后对于CSS，我使用inline-block将必要的元素并排放置。

.evaluate, .likeButtons { /* this is new */
    display: inline-block;
}
.icon-small {
    display: inline-block; /* was block before */
    /*position: absolute; <-- remove this */
    height: 32px;
    width: 32px;
    text-indent: -9999em;
    margin: 0 0.5em;
}
/*#bar span {
    float: none;
    padding: 0 0.2em;
    vertical-align: middle;
}
^ I don't think you need this any more,
maybe the padding but I'm sure you can work that out yourself */

#bar { /* didn't touch this */
    right: 70px;
    top: 1em;
    position: absolute;
    font-size: 0.7em;
}

Answer 2

您绝对定位图标，但没有定义它们在父级中的位置（顶部，底部，左侧，右侧），也是绝对定位的。

您可能需要为它们定义顶部值，然后单独定义左值或右值。

我强烈建议重组html并使用浮点数来完成你想要的。使用绝对定位可能是一种痛苦而且非常错误。

Answer 3

删除位置：绝对; 似乎工作

CSS需要“格式化”的帮助

3 个答案: