html - 将div定位在导航栏中

我正在尝试将网站标题（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>

最佳答案

我认为您的CSS太多了。只需将ul更改为：

 display:inline;

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

看到这个小提琴：https://jsfiddle.net/x20mkx1n/5/在这里，我已经取出了很多CSS。