html - css:图像和标题的对齐问题

Question

我在尝试将图像与导航菜单中的标题对齐时遇到问题。理想情况下，所有内容都应在底部对齐。我创建了一个 jsfiddle 来重现这个问题:

http://jsfiddle.net/graphicsxp/j2t9R/

        <nav style="float: left">
            <ul class="menu">
                <li>
                    <a href="index.html" class="logo">
                        <img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
                </li>
                <li>
                    <h4 >Sam</h4>
                </li>
            </ul>
            <div class="clear"></div>

        </nav>
        <nav>
            <ul class="menu">
                <li class="current-menu-parent"><a href="javascript:void(0)">ACCUEIL</a>

                </li>
                <li><a href="javascript:void(0)">PAGES</a>

                </li>                   
            </ul>
            <!-- .menu -->
            <div class="clear"></div>
        </nav>
    </div>
</header>

原样:

成为:

Answer 1

我使用您的代码解决了这个问题，老实说，我无法告诉您我更改了什么，因为对于这样一个简单的任务，有很多代码需要处理。 Here it is anyway

我还冒昧地制作了一个新，以显示您的代码多么简单 could look

简单、干净、易于阅读。全部搞定一个<div> , 和一个无序列表。

无论如何，简化您的代码并使其易于阅读应该是编码的主要目标，但它也可以帮助用户更快、更轻松地回答您的问题，并更好地帮助您解决您的问题。