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

Question

我正在尝试在每个锚标记之间创建一个带有虚线的项目符号列表/菜单。

在翻转时，背景变为粉红色，并且它与虚线之间应该有足够的间距：

这看起来没问题，但是当我切换到移动布局时，虚线的位置完全关闭。

这是我的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标签上？

Answer 1

是的我同意Sven，使用类似的东西：

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

我选择了dashed，因为dotted可能有点多，而您上面的截图看起来更像是dashed。我抓住了一个快速的屏幕抓取颜色。

另外......你是否只想制作这款手机？或者它应该是响应？可能希望切换到某些em尺寸，以便它更相对于屏幕尺寸。