-1

私のコードは画像の上にテキストを表示するのに十分ですか？これは、stackoverflowのオレンジ色のボタン「AskQuestion」に似ていますが、ボタンではなく、リンクではありません。それはただのテキストとその周りのオレンジ色です。それはうまく機能しますが、コードがうまく見えて愚かではないかどうか私は興味があります。

//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 に答える