CSS利潤率最高不工作

我有這樣的CSS代碼：CSS利潤率最高不工作

.tab-box { 
    border-bottom: 1px solid #666666; 
    padding-bottom:5px; 
} 

.tab-box a { 
    border:1px solid #666666; 
    color:#FFFFFF; 
    padding: 0 5px 0 5px; 
    text-decoration:none; 
    background-color: #eee; 
    background:#666666; 
    color:#FFFFFF; 
} 

.tab-box a.activeLink { 
    background-color: #eeeeee; 
    color:#666666; 
    border-bottom: 0; 
    padding: 5px 15px; 
} 

.tabcontent { 
    padding: 5px; 
    width: 99%; 
} 

.hide { display: none;} 

.small { 
    color: #999; 
    margin-top: 100px; 
    border: 1px solid #EEE; 
    padding: 5px; 
    font-size: 9px; 
    font-family:Calibri; 
}

我試圖保證金頂部添加到鏈接。

我曾嘗試將margin-top:30px;添加到.tab-box a，但它沒有添加它。

我需要它，所以如果標籤總是大於屏幕寬度，當它們低於另一個時，它們不會重疊。

下面是完整的代碼http://jsfiddle.net/5rZP8/

來源

2013-11-01 charlie

你是把它應用到誰是.tabLink一個子元素a。

相反，將其應用於包含類.tabLink的a元素。

a.tabLink { 
    margin-top: 30px; 
}

jsFiddle example - 它的工作原理。您還需要添加display:inline-block以使邊距生效。

來源

2013-11-01 20:39:48

我要回答這個問題，但你會更快。 +1 –

小提琴請參閱接受這個問題的答案：display:inline with margin, padding, width, height。鏈接a是內聯HTML元素，在CSS中默認顯示爲display: inline。 display屬性的不同值將呈現不同。

摘錄：

請參閱「Inline formatting contexts」在CSS規範的完整的解釋。

來源

2013-11-01 20:38:45 FelipeAls

內聯元素不能很好地處理邊界。添加display: inline-block;似乎工作：

.tab-box a { 
    border:1px solid #666666; 
    color:#FFFFFF; 
    padding: 0 5px 0 5px; 
    text-decoration:none; 
    background-color: #eee; 
    background:#666666; 
    color:#FFFFFF; 

    display: inline-block; 
    margin-top: 30px; 
}

見琴：http://jsfiddle.net/5rZP8/2/

來源

2013-11-01 20:39:42

鏈接需要是您的代碼工作的塊元素。一旦鏈接是塊元素在div將擴大，以填補他們

.tab-box a { display: inline-block': }

：使用此功能來使他們的塊級元素，同時仍保留他們的其他造型。所以，現在你可以簡單地添加：

.tab-box { margin-top: 30px; }

來源

2013-11-01 20:42:58 Stratus3D

一個元素默認顯示爲內聯。所以爲了保證金生效需要這個。

通過這種方式，瀏覽器會將邊距和填充屬性應用到錨點。

http://jsfiddle.net/5rZP8/6/

我更新，所以你可以看到它的工作。

.tabLink { 
    margin-top:30px; 
    display:inline-block; 
}

來源

2013-11-01 20:44:48

CSS利潤率最高不工作

回答

相關問題