-1

我的代码是否足以在图像上方显示文本？它看起来类似于 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>

结果，文本正好位于图像的上方（中心）。

4

3 回答 3

1

像这样的东西会好得多：

CSS：

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

HTML：

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

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

于 2012-07-10T13:48:12.460 回答
1

IMO 代码看起来非常拥挤。您可以轻松地制作一个锚点，其样式类似于这样的按钮：

a{

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

a:hover{

background: grey;

}

例子 ​</p>

于 2012-07-10T13:48:57.920 回答
0

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

// 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 从来都不是一件好事。

希望这可以帮助

于 2012-07-10T13:50:39.927 回答