Question

我是html / css的新手，需要创建如下内容：

-----------------
|   |        UP |
| # | foobar    |
|   |        DN |
-----------------

UP和DN是指示和upvote和downvote的图像。＃是UP和DN投票的最终结果。所以我非常精通javascript来处理ajax /服务器端。我的技能主要缺少html / css - 这些按钮的实际UI设计。

有没有人对我应该研究的CSS主题有什么建议，或者网上有一些很好的教程可以教我如何逐步完成这个？即使是关于如何进行这项工作或将其分解成碎片的高级想法也会很棒。

Answer 1

对于实际的向上和向下箭头，可以使用↑↓字符进行一些严格的缩放或使用图像。（从技术上讲，你可以使用z-index和CSS3旋转，并使用纯CSS制作它，但是不要去那里。：）

有几种方法可以获得您想要的基本布局。你需要两个块：一个数字块和一个上/下块。这些块可以使用CSS display:inline-block布局，其中元素的行为类似于块级元素（这意味着您可以设置宽度/高度等），但显示在彼此相同的行上。请记住，IE7及更低版本不支持inline-block，但您可以使用仅为IE7设置的display:inline; zoom:1来设置它。或者你可以向左/向右浮动两个元素。这通常有一些奇怪的副作用。

某些实际标记可能如下所示：

<div class="votesBox">
    <div class="votes">5</div>
    <div class="vote">
        <div class="voteUp">UpVote</div>
        <div class="voteDown">DownVote</div>
    </div>
</div>

CSS：

.votes, .vote {
 display:inline-block;
}
.vote {
 vertical-align:middle;   
}

您可以将.voteUp和.voteDown替换为图像和线点击事件到JS，然后相应地更新.votes的内容。

http://jsfiddle.net/WpxAm/1/

https://developer.mozilla.org/en/CSS/display

https://developer.mozilla.org/en/CSS/float

https://developer.mozilla.org/en/CSS/box_model

Answer 2

在@Thomas发布他的回答之前，我正在研究这个问题，所以无论如何我都会发布它。它还提供免费的免费JSFiddle。

实质上，使用display: inline-block以及vertical-align: middle或line-height: 30px（或许多px）来定位事物。

Answer 3

请遵循以下主题：

CSS定位
CSS Floats
CSS box model

这几乎就是你所需要的全部：）

使用html / css创建带计数器的向上/向下投票按钮

3 个答案: