css - 使用 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>