Bullet圖像自動調整大小

我使用CSS3格式化。我有用於子彈的過大圖像。我希望子彈自動調整爲字體的大小。我能做到嗎？Bullet圖像自動調整大小

如果不是，（該死的）我將如何設置圖像子彈特定的大小？（如12的高度，並自動調整的寬度）

ul { 
     list-style-image: url('rectangular_bullet_image.jpg') 
    }

來源

2014-01-20 Evorlor

爲什麼要使用* large *圖像作爲列表項目符號？但是如果你希望它可以調整大小，我會建議使用自定義字體或Unicode字符和'li：before'。 – Blazemonger

避免列表式圖像 - 它無法控制圖像的位置或大小。改爲使用CSS背景。 –

小提琴如果你希望它擴展到的高度李，然後使用Mihnea解決方案。

如果你希望它擴展到字體大小，使用

ul li { 
    padding-left: 20%; 
    background: url('rectangular_bullet_image.jpg') no-repeat left top; 
    background-size: auto 1em; 
}

其中最後一個尺寸（1EM）是指字體的大小。所以，如果你想要它比字體略大，設置1.2em

請注意，如果li只有1行，則2種解決方案大致相同。

這對於多行li有不同之處。

來源

2014-01-20 21:18:03 vals

嘗試這樣的事情

ul { 
    list-style-type: none; 
    padding: 0; 
} 

ul li { 
    padding-left: 20%; 

    background: url('rectangular_bullet_image.jpg') no-repeat left top; 
    background-size: 20% 100%; 
}

繼承人與它http://jsfiddle.net/YUjdz/1/

來源

2014-01-20 20:33:38

Bullet圖像自動調整大小

回答

相關問題