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

我用你的代码解决了这个问题，老实说，我无法告诉你我做了什么改变，因为这样一个简单的任务有很多代码要做。反正就是这里

我还冒昧地制作了一个新的，展示了您的代码看起来多么简单

简单，干净，易于阅读。一切都用一个<div>和一个无序列表完成。

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

Answer 2

临时修复可以是：

为 h4 元素添加 css .... 最好给 id 然后添加。

我看过你的小提琴，请把下面的代码放在你的css中

h4{
    margin-top:150px;
}

或者

（将 id=hompageheaderUserName 给 sam 的 h4）

h4#hompageheaderUserName
{
    margin-top:150px;
}

根据您的需要更改宽度空调。

小提琴截图：