Question

我遇到以下CSS问题。投票我不想与标题高度相同。虽然看起来投票与标签和div相同。所以左边的3个项目看起来缩小了。我是新手，所以我没有看到我做错了什么。在将高度从54像素更改为60像素之前，我已将其工作，但我认为还有其他一些内容也已添加。

#containerpostsmall {
width: 800px;
height:60px;
}
.votes {
height:60px; 
width:100px;
float: left;
}
.number {
height:40px; 
text-align: center;
}
.number-text {
height:20px; 
text-align: center;
}
.texttags {
width:500px;
height:60px;
float: left;
}
.title {
height:40px;
width:500px;
font-size:32px;
overflow: hidden;
white-space: nowrap;
}
.tagsby {
height:20px;
width:500px;
float: left;
}
.tags {
float: left;
}
.by {
float: right;
}

我有以下代码部分：

<div id="containerpostsmall">
<div class="votes">
    <div class="number">
        <h1>6</h1>
    </div>
    <div class="number-text">
        votes
    </div>
</div>
<div class="votes">
    <div class="number">
        <h1>1</h1>
    </div>
    <div class="number-text">
        answers
    </div>
</div>
<div class="votes">
    <div class="number">
        <h1>4</h1>
    </div>
    <div class="number-text">
        comments
    </div>
</div>
<div class="texttags">
    <div class="title">
        <a href="/Post/View/37">We were very tired.</a>
    </div>
    <div class="tagsby">
        <div class="tags">
                    <span style="background-color: #ffffff; border-color: #000000;"><a href="/Post/ByTag/2">Forest</a></span>
                    <span style="background-color: #ffffff; border-color: #000000;"><a href="/Post/ByTag/3">Ocean</a></span>

        </div>
        <div class="by">
            <a href="/Post/ByAuthor/30">Peter</a> |
            2013-12-03 18:56:34
        </div>
    </div>
</div>
</div>

Answer 1

在我看来，这是一个默认的h1格式问题。浏览器将默认样式应用于某些元素。

我设置

h1{
    margin: 0;
}

请参阅小提琴：http://jsfiddle.net/kZLub/

CSS问题与div的对齐

1 个答案: