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

I am fairly new to html/css and need to create something like the following:

我对html/css相当陌生，需要创建如下内容:

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

Where UP and DN are some images indicating and upvote and downvote. The # is the net result of the UP and DN votes. So I am fairly well versed in javascript to handle the ajax/server-side. My skills primarily lack in the html/css - the actual UI design of these kinds of buttons.

其中UP和DN是一些表示向上和向下的图像。#是UP和DN投票的最终结果。所以我非常精通javascript处理ajax/服务器端。我的技能主要是缺乏html/css——这类按钮的实际UI设计。

Does anyone have advice on CSS topics I should look into or some good tutorials on the web that can teach me how to make this step by step? Even a high level idea of how I should proceed to make this or break this into pieces would be great.

有没有人对CSS主题有什么建议，我应该去看看，或者在网上有什么好的教程可以教我如何一步一步地去做?即使是一个高层次的想法，我应该如何去做这个或把它分解成碎片将是伟大的。

3 个解决方案

#1

For the actual up and downvote arrows, either do some serious scaling with the ↑↓ characters or use images. (You could technically get really fancy with z-index and CSS3 rotating and make it with pure CSS, but let's not go there. :)

实际downvote箭头,要么做一些严肃的扩展与↑↓字符或使用图像。(技术上，你可能会对z-index和CSS3旋转很感兴趣，然后用纯CSS来做，但我们不去那里。:)

There's a few ways to get that basic layout you want. You'll need two blocks: a number block and a up/down block. Those blocks can be laid out with CSS's display:inline-block, where the elements behave like block level elements (which means you can set width/height, etc.) but display on the same line as each other. Keep in mind inline-block is not supported by IE7 and lower, though you can hack it with display:inline; zoom:1 set just for IE7 lower. Or you could float the two elements left/right. This often has some odd side effects though.

有一些方法可以得到你想要的基本布局。你需要两个block:一个number block和一个up/down block。这些块可以通过CSS的display:inline-block进行布局，其中元素的行为类似于块级元素(这意味着您可以设置宽度/高度等)，但是显示在相同的行上。请记住，inline-block不受IE7和更低版本的支持，但是可以使用display:inline;缩放:1设置为IE7更低。或者你可以把这两个元素放在一起。这通常会有一些奇怪的副作用。

Some actual markup might look like:

一些实际的标记看起来可能是:

<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;   
}

You could replace .voteUp and .voteDown with images and wire click events to JS, then update the .votes's content accordingly.

您可以用图像替换. 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

#2

I was working on this before @Thomas posted his answer, so I'll post it anyway. It also comes with a complimentary, free JSFiddle.

在@Thomas公布他的答案之前，我一直在研究这个问题，所以无论如何我都会把它贴出来。它还附带赠送的免费的JSFiddle。

In essence, use display: inline-block along with vertical-align: middle or line-height: 30px (or however many px) to position things.

本质上，使用display: inline-block和vertical-align: middle或line-height: 30px(无论多少px)来定位。

#3

Follow these topics:

遵循以下主题:

CSS Positioning
CSS定位
CSS Floats
CSS漂浮
CSS box model
CSS盒模型

that's almost all you need for this :)

这就是你所需要的:)

#1