Css 上面的文字-我的代码足够好吗？

我的代码是否足以在图像上方显示文本？它看起来类似于stackoverflow橙色按钮询问问题，但不是按钮，也不是链接。它只是一个文本和周围的橙色。它工作得很好，但是如果代码看起来很好并且不愚蠢，我很确定

//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>

---

因此，文本正好位于图像中心上方。

类似的内容会更好：

CSS:

HTML:

---

无论如何，您应该阅读一些CSS基础知识。例如，我快速搜索了一下，这可能是一个好的开始。

在我看来，代码似乎过于拥挤了。你可以很容易地制作一个锚，样式像这样的按钮：

a{

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

a:hover{

background: grey;

}

---

​

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

// 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>

如果你能得到线条高度，负的顶部边距可能没有必要：在那里工作，但我认为这可能看起来更专业。内联CSS从来都不是一件好事

---

希望这对你有所帮助

orange.png是什么样子的-你为什么用图像而不是背景色呢。此外，这并不适用于Stackoverflow。好吧，除了img标签上缺少的alt、width和height属性，以及您可以在第二分区边距中组合边距属性：-18px 0 0 6px之外，它在语法上看起来是正确的。。。除非我忽略了什么。background-image对我来说似乎更合适。既然已经为顶部的元素定义了内联css，为什么还要使用它呢？image标记不是语法正确的xml。无论如何，在codereview.stackexchange.com上这可能会更好。

a{

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

a:hover{

background: grey;

}

// 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>