Question

I am wanting to include a logo image in my tab bar, but it is causing the tabs to not be at the bottom of the tab bar. Here is the code I am using:

<div id="tabs">
  <div id="logo">
    <img src="./img/logo.png">
  </div>
  <ul>
    <li><a href="./dashboard.html">Dashboard</a></li>
    <li><a href="./eventlog.html">Event Log</a></li>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Management</a></li>
  </ul>
</div>

I am attaching a screenshot of what it currently looks like:

Answer 1

Make the <li> the height of the logo, and set a margin-top with the difference between the height of the image and the height of the <li>.