頂部滑塊

我的圖片出了問題，我無法解決這個問題。這裏是我的編碼..頂部滑塊

HTML

<div id="adsBox"> 
    <div id="ads"> <a href="#"> <img src="picture.jpg" alt="ads"> </a> </div> 
    <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p> 
</div>

CSS

#ads { 
    -webkit-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-bottomright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

#adsBox { 
    text-align:right; 
    color:black; 
    width:970px; 
    margin:0 auto; 
    background-color:#E0E0E0; 
    -webkit-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-radius-bottomright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

#adsBox a { 
    color:#535353; 
    padding:0; 
    margin:0; 
} 

#adsBox a:hover { 
    color:#4682b4; 
} 

#ads a { 
    margin:10px; 
} 

#showLink { 
    text-decoration:none; 
} 

.hideLink { 
    display:none; 
}

我使用jQuery滑下。一切都好，只是問題是形象不是真的在div上。這有點向右移動。這裏是JSFIDDLE。有任何想法嗎？

來源

2014-03-12 Anthosiast

你可以添加你的jquery到提琴手嗎？ – BlackHatSamurai

你可以添加一個有效的圖像，你的腳本到小提琴？ –

我試圖刪除'text-align：right'，但它仍然是一樣的。 @Justin – Anthosiast

T他錯誤在這裏。

#ads a { 
    margin:10px; 
}

div內部的圖像會因左邊距爲10像素而右移一點。它必須刪除。

來源

2014-03-12 19:24:52 Anthosiast

您已設置像素寬度，爲width:970px;

改變它

width:100%;

FIDDLE

側面說明：您可能要關閉img標籤，希望這修復您的問題

來源

2014-03-12 19:22:44

這對我來說很有意義。無論如何，我已經解決了這個問題，我已經在那裏回答了。感謝回覆！ – Anthosiast

@Anthosiast好吧，如果你設置的像素寬度，它會在你的屏幕上看起來很好，但它會在小分辨率的設備或jsfiddle中創建水平滾動。因爲你在小提琴中的形象被打破了，這是唯一可見的東西。 –

是的，它會對響應非常有用。謝謝你讓我知道。 – Anthosiast

回答

相關問題