html - CSS：跨度和 li 的高度不匹配

Question

http://goldencraft.co/stackoverflow-test/

HTML：

<ul class="list">
<li><a href="#">item 1</a></li>
<li>item 2
<ul class="list">
<li>item 2 -> sub item 1 <a href="#" class="button orange"><span>Stack Overflow</span></a></li>
<li>item 2 -> sub item 2
<ul class="list">
<li>sub item 2 -> sub-sub item 1</li>
<li>sub item 2 -> sub-sub item 2</li>
</ul></li>
<li>item 2 -> sub item 3
</ul></li>
<li>item 3</li>
</ul>

CSS：

ul.list li {
    padding-left: 12px;
    line-height: 2em;
    background: url('../images/list_arrow.png') no-repeat 0px 8px;
}
ol ol,
ol ul,
ul ol,
ul ul {
    padding-left: 40px;
}

我无法弄清楚以下内容：

1. 使line-height和/或padding与按钮 css 样式匹配（单击此处查看[查看.button span]）
2. 将 (background-image) 箭头与文本行对齐（如果 1 得到固定，这很容易用 simple 完成background-position）

我希望这里有人有解决方案，因为我很想完成这个。

Answer 1

如果我正确理解了这个问题，您可能正在寻找类似以下内容：

a.button, a.button:hover
{
    text-decoration: none;

    margin-top:-0.1em;
    height:1.4em;
    top:0.5em;
}

button span
{
    position: relative;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    /*border-top: rgba(255, 255, 255, .2) 1px solid;*/
    line-height: 1em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    margin: 0px !important;

    padding: 0 0.75em;
    top:-0.3em;
}