0

これが参考のための私のフィドルです。

そして、改行を作成し、「比較」ボタンを中央に配置するための html マークアップを次に示します。

<p><center><a class="awesome medium orange" href='#'>Compare</a></center></p><center><span style="font-size: xx-small;">Sold by someone</span>

タグの代わりに css を使用しますか? 仕事をするために、.center.awesomeとのような 2 つのクラスを追加する必要がありますか?.linebreak.awesome

私は次のようなことを試しました

.center.awesome{
    text-align:center;
    margin: 0px auto 0px auto;
}

しかし、うまくいきません。

CSS リファレンス:

.awesome{
background: #222 url() repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25); 
position: relative;
cursor: pointer;
}

.medium.awesome {
font-size: 13px;
    }
.orange.awesome {
background-color: #ff5c00;
}
4

1 に答える 1

1

スタイル設定に HTML タグの代わりに CSS を使用する理由は、あらゆる種類のプログラミングの非常に重要な原則に由来します。. Web ページ内の構造的なオブジェクト、つまり CSS だけでスタイルを設定して配置できるオブジェクトに HTML を純粋に使用したい。この理由は、プロジェクトが成長するにつれて、小さな「CSS のような修正」 (インライン CSS またはセンター タグのいずれか)、それらが配置されている場所、および何が何を行っているかを追跡することが非常に困難になり、イライラする可能性があるためです。開発者。したがって、すべてのスタイリング コードを外部 CSS ドキュメントに保持し、すべての Javascript 関数宣言を別の外部ドキュメントに保持し、他のドキュメントではできるだけ純粋な HTML を保持するようにしてください。小規模なプロジェクトでは意味がわからないかもしれませんが、このプラクティスは、些細なプロジェクト以上の真の命の恩人です。

アップデート：

あなたの他の質問について：なぜ

<center><a...></a></center>

ボタンを中央に置き、

<a class="center">...</a>

しませんか？

これは、class ="center"をtext-align:centerとともにa要素に追加すると、要素自体ではなく、a要素内のコンテンツが中央に配置されるためです。a要素全体を中央に配置する場合は、要素を別のタグでカプセル化し、代わりにそのタグのコンテンツを中央に配置する必要があります。たとえば、次のようになります。

<div class="center">
    <a ...>Buttontext</a>
</div>

これにより、コンテンツがdiv要素内の中央に配置されます。div要素が全幅の場合、これにより a -link が中央に配置されます。

それが役立つことを願っています!

于 2013-09-09T17:02:39.973 に答える