2

私は次のHTMLを持っています:

<div class="top">
        <div class="header title">Some Big Header Goes Here</div>
        <div class="sub-header title">The fancyness enters here.</div>
        <a href="#">A random link</a>
</div>

次のクラスでスタイル設定:

.header {
        padding:2%;
}
.sub-header {
        font-size:120%;
        font-style:italic;
}
.title {
        font-size:158%;
        line-height:80%;
}
.top {  
        display:block;
        text-align:center;
        border:1px solid lime;
        padding:1%;
}
.top a {
       /*color:red;*/ /* This works but I don't want this */
       padding:100000px; /* This does not work, nor do smaller values */
       margin:-999999px; /* This does nothing. */
}

アンカー リンクのスタイルを設定して、上の 2 つのヘッダーから少し離すために、パディングとマージンを少しだけ付けて配置するにはどうすればよいですか?

4

2 に答える 2

6

display: block;aを .top a スタイルに追加し、それに応じてマージンとパディングを調整します。

top a {
       display: block;
       /*color:red;*/ /* This works but I don't want this */
       padding:10px; 
       margin:20px; 

}

作業フィドル: http://jsfiddle.net/jnz65/

于 2013-03-11T07:08:31.400 に答える
2

属性が指定されている場合、アンカー タグは親から特定の属性を継承しませんhref。display:blockそのため、アンカー タグのスタイルを具体的に追加する必要があります。

于 2013-03-11T07:31:00.117 に答える