css - 上面的文字 - 我的代码足够好吗?

标签 css image html text

<分区>


想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。

关闭 10 年前

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

因此,文本正好位于图像上方(中心)。

最佳答案

类似的东西会好得多:

CSS:

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

HTML:

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

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

关于css - 上面的文字 - 我的代码足够好吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11414611/

上一篇:html - 垂直对齐列出元素

下一篇:html - 您对 Internet Explorer 支持持什么立场?

相关文章:

jquery - 多个滑动开关

仅 CSS 模态窗口在 Android 上正常,在 iOS 上不工作

javascript - 图像上的摆动动画。 (就像酒馆的招牌。)

html - 图像在 IE 中显示像素化

html - 在字段集中并排放置两个 div

css - 位置 : sticky 的对面

css - 垂直导航背后的 HTML 文本换行

html - 将图像的不同部分链接到不同的 url

javascript - 如何显示用户选择上传的图像

css - 如何阻止div在悬停时移动