html - CSS: span と 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. and line-height/orpaddingをボタンの 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;
}