html - 导航栏中的元素对齐

Question

今天我尝试为我的新站点创建一个导航栏

将由两部分组成，一个占 15%，另一个占宽度 我试图用填充来调整高度，但是当我对齐导航的内容时我遇到了几个问题。

http://jsfiddle.net/MKY3r/

.main-nav {
  background: -webkit-linear-gradient(left, green, green 15%, red 15%, red);
  padding : 15px;
}

.main-nav .logo {
  width: 15%;
  float: left;
}

.main-nav .nav-content {
  width: 85%;
}

如你所见，这应该是一个相当简单的问题，但我无法理解解决方案

我希望你能帮助我，提前致谢

Answer 1

将{display:inline}添加到.nav-content中的段落

代码:

.nav-content p {display:inline;}

Demo

我建议在您的 .nav-content 中使用一些标题元素，例如 h1 而不是 p

Demo with H1