html - 在导航栏内定位 div

Question

我正在尝试将网站标题 (div) 放在导航栏的左侧。我想再造一个

<li><a> 

元素并将其作为网站标题，但我不希望它具有某些属性，例如字体系列和悬停。

这是我目前拥有的:

这就是我想要实现的目标:

总而言之，我想添加一个 div 以将我的网站标题放在导航按钮的左侧。

#nav {
  width: 100%;
  height: 50px;
  float: left;
  margin: 0 0 1em 0;
  padding: 0;
  background-color: #3D3D3D;
}
#nav ul {
  list-style: none;
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  padding: 8px 15px;
  height: 50px;
  text-decoration: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  color: #FFFFFF;
}
#nav li a:hover {
  color: #FF4343;
  background-color: #FFFFFF;
}

<div id="nav">
  <ul>
    <li><a href="#">Prev 1</a>
    </li>
    <li><a href="#">Prev 1</a>
    </li>
    <li><a href="#">Prev 1</a>
    </li>
  </ul>
</div>

Answer 1

我觉得你的 CSS 太多了。只需将 ul 更改为:

 display:inline;

然后设置一些行高就可以了。

请参阅此 fiddle :https://jsfiddle.net/x20mkx1n/5/我在其中删除了您的大部分 CSS。