Question

我的代码是否足以在图像上方显示文字？它看起来类似于stackoverflow橙色按钮“Ask Question”，但不是按钮，而不是链接。它只是一个文本和它周围的橙色。它工作正常，但如果代码看起来很好而且不愚蠢我就很好。

//css
    .date
    {
        float : left;
        width : 100px;
    }
//html   
<div class="date">
    <img src="orange.png">
    <div style="margin-top:-18px; margin-left:6px; color:#fff;">22.11.2012
    </div>
</div>

结果，文本正好在图像的上方（中间）。

Answer 1

这样的事情会好得多：

CSS：

.date {
    padding: 5px;
    background-color: orange;
    color: #fff;
}

HTML：

<span class="date">
    22.11.2012
</span>

无论如何，你应该阅读一些关于CSS基础知识的内容。我进行了快速搜索，this可能是一个良好的开端。

Answer 2

IMO代码看起来非常拥挤。你可以很容易地制作一个锚，像这样的按钮样式：

a{

padding: 7px;
background-color: orange;
text-decoration: none;
color: black;
font-family: helvetica;
}

a:hover{

background: grey;

}

Example

Answer 3

看到您关心的是代码的美学，我建议这样做：

// css
.date
{
    float: left;
    width: 100px;
}
.date div
{
    margin-top: -18px;
    margin-left: 6px;
    color: #fff;
}

// html
<div class="date">
    <img src="orange.png">
    <div>22.11.2012</div>
</div>

如果你可以在那里工作line-height:，可能没有必要使用负的上边距，但我认为这可能看起来更专业。内联CSS从来都不是一件好事。

希望这有帮助

上面的文字 - 我的代码是否足够好？

3 个答案: