背景：我正在进行的当前设计需要一行徽标，然后是菜单。我想要的是徽标和菜单（由两个部分组成，这里是两个无序列表）出现在一行或一个部分。
标题的一部分：标题由徽标图像，左侧菜单和右侧菜单组成。左侧菜单和右侧菜单是代码中的无序列表项。
面临的问题：我试图在一个div元素中添加徽标图像和菜单，将它们组合在一行中。但是图像显示在顶部，然后是菜单元素。我尝试过使用显示器：内联将徽标图像放在一边，菜单从徽标图像开始，但它没有用。我正在共享我的代码。图像是否可以与菜单项一起定位和对齐，而不使用绝对位置？代码中只有HTML5和CSS3。代码中没有javascript。
.header{
position:relative;
margin:0;
padding:0;
}
.top{
height:20%;
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
.element{
clear:both;
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li><a href="index.html">Buy</a></li>
<li><a href="index.html">Rent</a></li>
<li><a href="index.html">Sell</a></li>
<li><a href="index.html">Mortgages</a></li>
<li><a href="index.html">Agent finder</a></li>
<li><a href="index.html">More</a></li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li><a href="#">List your rental</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>CSS的注释中的解释，其中进行了更改。
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.header{
position:relative;
margin:0;
padding:0;
height:30vh;/*giving height to header*/
}
.top{
height:100%;/*making it to cover complete header*/
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
/* properties to be added to log div*/
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.element{
/*removing the clear property*/
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li><a href="index.html">Buy</a></li>
<li><a href="index.html">Rent</a></li>
<li><a href="index.html">Sell</a></li>
<li><a href="index.html">Mortgages</a></li>
<li><a href="index.html">Agent finder</a></li>
<li><a href="index.html">More</a></li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li><a href="#">List your rental</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>