如何将Wordpress导航栏对齐到徽标的右侧？

Question

我试图在我的Wordpress主题中将导航栏放到徽标的右侧。它是用Underscores构建的。我已经设法按照我想要的方式排列主导航和徽标，基本上，这个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

这让我在昨天的大部分时间里都弄清楚了，但是对于缺乏回应感到失望，这就是我想到的。我在这里发布它给其他有类似问题的人。

首先，我拿了徽标（名为.header-image）并添加了：

float: left;
position: relative;

然后我将我想要的导航（名为.main-navigation）的左侧导航并删除了我的解决方法，这是

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

并且变得清晰：两者;清除：无;

我在.main-navigation中添加了一些个人CSS，使其与

的徽标相匹配

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

我从.main navigation ul。

中删除了任何花车

Answer 2

最好创建一个主div并在同一个div中插入徽标和导航部分，使用float：left;对于他们两个。如果你得到这个，请告诉我，或者我会通过一个例子告诉你。

Answer 3

使用WordPress的Underscores启动主题，可以使用以下方法将导航栏浮动到徽标（或网站标题）的右侧：

将以下CSS添加到样式表中：

.site-branding{
    float: left;
    display: inline-block;
}
.site-description{
    display: none;     
}
#site-navigation{
    float: right;
    clear: none;
    width: auto;
}

这些说明基于自定义之前的Underscores主题。