液体水平导航按钮与单独的图像和文本使用CSS

Question

是否可以使用带有图像链接的液体导航栏。我正在尝试使用左侧图像和右侧文本的响应式链接。如果窗口大小发生变化，那么按钮（链接）也会改变大小。我更喜欢用CSS做到这一点。

到目前为止，我所做的是拥有以下内容：

<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
    <ul class="main_nav">
        <li>
            <a href="#me">
                <img src="img/avatar/me.png" alt="me">
                Me
            </a>
        </li>

        <li>
            <a href="#guide">
                <img src="img/avatar/spotlight.png" alt="guide">
                Guide
            </a>
        </li>

        <li>
            <a href="#downloads">
                <img src="img/avatar/downloads.png" alt="downloads">
                Downloads
            </a>
        </li>
    </ul>
<div>