私は単純なHTMLページを持っています。幅500ピクセルのテーブルがあります。テーブルには、ハイパーリンクを挿入した1つのセルがあります。ハイパーリンクは、幅がtdの幅の100%であるブロックとして表示する必要があります。複数のCSSクラスを含むHTMLハイパーリンクがすべてのCSSスタイルを使用していない
とにかく、ハイパーリンクは表示されません。これはインラインブロックとして表示され、font-weightは400ではなく500になります。同時に、フォントサイズは12ピクセルですが、11ピクセルにする必要があります。
HTMLコードとCSSコードの何が問題なのかよくわかりません。たぶんあなたが知っていると私を助けることができます。
<table style="width: 500px">
<tr>
<td style="width: 100%"><a href="go.html" class="painike painike-hae-muokattavaksi" data-bio="1">Name</a></td>
</tr>
</table>
.painike {
box-sizing: content-box;
height: 18px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
padding-bottom: 3px;
border: none;
margin: 1px;
background-color: #323B5A;
font-family: "Exo 2", Tahoma, sans-serif;
font-weight: 500;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
line-height: 18px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
a.painike:link, a.painike:visited {
color: #FFFFFF;
text-decoration: none;
font-family: "Exo 2", Tahoma, sans-serif;
font-weight: 500;
font-size: 12px;
display: inline-block;
}
.painike:active, .painike:hover {
margin: 1px;
background-color: #B4166F;
}
.painike.painike-hae-muokattavaksi {
padding-top: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 0;
left: 0;
right: 0;
color: #FFFFFF;
text-decoration: none;
display: block;
margin: 0;
box-sizing: content-box;
height: 22px;
line-height: 22px;
text-align: left;
font-family: "Exo 2", Tahoma, sans-serif;
font-weight: 400;
font-size: 11px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
可能性がありますpainike他のクラスをオーバーライドします。 !importantを使用することができます。それを強制するコマンド。 –
@GeneLimこれらのCSSクラスをCSSファイルにどのような順番で並べるべきですか? – xms