html - 如何将 Wordpress 导航栏对齐到 Logo 的右侧？

Question

我试图让我的导航栏位于我的 Wordpress 主题中 Logo 的右侧。它是用下划线构建的。我已经设法按照我想要的方式排列主导航和 Logo ，基本上，使用这个 CSS:

.main-navigation {
    position: relative;
    float: right;
    top: -4em;
    width: 55%;
    display: block;
    clear: both;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    float: right;
}

这是我希望它看起来如何的图片:

我知道负边距(假设 top: -4em; 被认为是负边距)不是优雅的，也不是处理这类事情的最佳方式。另外，我通常发现这些类型的解决方法通常会在以后回过头来困扰我。

我是 JSFiddle 的新手，所以我希望我做对了!这是我的代码，现在已经浓缩了!:http://jsfiddle.net/DMDesigns/d39ej96r/11/

实现这一目标的最佳方式是什么？我一直在搜索，看到很多人问这个问题，但是很多答案都针对他们的网站太具体了，对我没有帮助。

Answer 1

这花了我一天的大部分时间来弄清楚，昨天，但对缺乏回应感到失望，这就是我想出来的。我将其发布在这里，供遇到类似问题的其他人使用。

首先，我获取了 Logo (名为 .header-image)并添加了:

float: left;
position: relative;

然后我将我想要的导航移至左侧(名为 .main-navigation)并删除了我的解决方法，即

float: right; 
top: -4em; 
width: 55%;  

并更改为 clear:both;清除:无；

我在我的 .main-navigation 中添加了一些个人 CSS 以使其与原来的 Logo 相匹配

 height: 112px;
 background: #69d7f9;
 z-index: -1;
 padding: 28px 0;

并且我从 .main navigation ul 中删除了所有 float 。