如何使用虛線製作項目符號列表（菜單）

我試圖在每個錨標記之間用虛線製作項目符號列表/菜單。如何使用虛線製作項目符號列表（菜單）

在翻車時，背景變成粉紅色並且應該有它和虛線之間的間距足夠量：

Comp showing horizontal items separated by pink dashed lines.

這看起來不錯，但是當我切換到移動的佈局，虛線的位置完全關閉。

這裏是我的CSS：

li { 
    background: url('images/dotted-line.png') repeat-x 0px 41px; 
    height: 55px; 
    padding: 0; 
} 

a:link, a:visited { 
    display: block; 
    color: @darkpink; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 10px 8px 8px 8px; 
    margin-top: -9px; 
    text-transform: uppercase; 
    width: 195px; /* 188 */ 
    cursor: pointer; 
    .textshadow(); /* less minim */ 
} 

a:hover, a.selected { 
    border-radius: @radius; 
    background-color: @darkpink; 
    .textshadowdark(); 
    cursor: pointer; 
    color: #FFF; 
}

我只是想知道，如果它是一個好/壞主意，把背景虛線上li標籤。在媒體查詢中重新定位圖像還是將圖像放在anchor標籤上更好？

來源

2012-03-02 redconservatory

看看你是否可以抓取你的移動佈局的屏幕截圖。在移動設備或模擬器上。 – BoltClock 2012-03-02 19:06:00

然後不要爲此使用圖片。只是一個邊框底部：1px點綴粉紅色;爲李。我不知道你的粉紅色的顏色代碼。 – 2012-03-02 19:06:47

沒關係粉紅色是一個變量，所以我在我的頁面的頂部無論如何 – redconservatory 2012-03-02 19:49:43

是的，我同意斯文，使用這樣的：

li { 
    border-bottom:1px dashed #ce1443; 
    height: 55px; 
    padding: 0; 
}

我dashed去，因爲dotted可能有點多，你上面的截圖看起來更像是一個dashed。我只是抓了一個快速的屏幕抓取顏色。

另外...你是否只想製作這款手機？還是它應該是反應？可能要切換到一些em大小，所以它會更相對於屏幕大小。

來源

2012-03-02 19:09:58 cschneider27

我同意虛線看起來比虛線:) – 2012-03-02 19:15:11

更好，更容易管理......我使用的虛線實際上是一個有點複雜，但我認爲我會用文字陰影去解決這個問題，否則我會把它放在所有的地方。 – redconservatory 2012-03-02 19:46:55

如何使用虛線製作項目符號列表（菜單）

回答

相關問題