2017-03-15 5 views
0

私は単純な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; 
} 
+0

可能性がありますpainike他のクラスをオーバーライドします。 !importantを使用することができます。それを強制するコマンド。 –

+0

@GeneLimこれらのCSSクラスをCSSファイルにどのような順番で並べるべきですか? – xms

答えて

0

私は解決策を見つけたと思いCSS

.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; 
    width: 100%; 
    text-align: center; 
} 
+0

フォントの太さとサイズがまだ間違っています。 – xms

+0

何が問題なのですが、これでどのように修正されますか? –

+0

* a.painike:link、a.painike:visited *、* .painike *から 'font-weight'と' font-size'スタイルを削除してください。 – vishalgelani

0

の下に更新してください。ここでは:

<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; 
} 

a.painike.painike-hae-muokattavaksi { /* this was .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; 
} 
関連する問題