液体水平导航按钮，使用css提供单独的图像和文本

有可能有一个液体导航栏，链接上有图像。我正在尝试有一个响应链接，左边是图像，右边是文本。如果窗口的大小改变，那么按钮（链接）的大小也会改变。我更喜欢用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>

更适用于UX或溢出。此外，您还应该包括您尝试过的CSS。人们会更愿意介入，而不是开始告诉你该做什么。发布你的CSS并把它放在一把小提琴上。使用占位符图像。