如何使用虚线制作项目符号列表（菜单）

我试图在每个锚标记之间用虚线制作项目符号列表/菜单。如何使用虚线制作项目符号列表（菜单）

在翻车时，背景变成粉红色并且应该有它和虚线之间的间距足够量：

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

如何使用虚线制作项目符号列表（菜单）

回答

相关问题