inline diplay in html/css - html

Question

I'm trying to dispaly some element in single line inside header of my blog, but i have problem with logo in it.
here is my code:
CSS:
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>a {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
color:#47c9af;
height:30px;
text-decoration: none;
}
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
HTML:
<div class="container">
<ul class="list">
</li>
<li></li>
<a href='#'><li><h1 >Header Of My Blog </h1></li></a>
<a href='#'><li><p>SubHeader</p></li></a>
<a href='#'><li><h3></h3></li></a>
</ul>
</div>
The result is something like this:
As you can see logo is not in order with other elements, what should i do?
Thanks.

Answer 1

Fixing the Alignment
To fix the alignment you simply need to introduce the vertical-align property to align everything to the top:
.list {
...
vertical-align: top;
}
Making your HTML Valid
A problem with your markup is that ul elements must only contain li children. Your current ul element has a children which have li elements inside them - this is invalid. Wrap your a elements within the li elements instead:
<ul>
<li>
<a></a>
<li>
</ul>
Making your HTML Semantic
You need to ask yourself some questions about your current markup:
What is this a list of? Why are you using the ul element instead of the header element?
Why are you using a p element as a "SubHeader"?

Answer 2

First, let us rearrange your HTML, so the code is valid. A list (ul) has list-items (li). The list items may contain anchors, paragraphs, headings, etc. Not the other way around.
Then we'll need to change the CSS a bit, so the anchors get the right color.
But the most important thing is the vertical alignment of the table-cells. By adding vertical-align to the list items, they'll be in the right alignment.
.container {
background-color: white;
color:#47c9af;
height:100%;
font-family: WYekan !important;
}
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
img {
padding: 0;
}
.list>li {
display: table-cell;
border-left:1px #47c9af solid;
text-align: center;
height:30px;
vertical-align: middle;
}
.list li a {
color:#47c9af;
text-decoration: none;
}
<div class="container">
<ul class="list">
<li><img src="http://placehold.it/150x75" /></li>
<li></li>
<li><h1>Header of my blog</h1></li>
<li>Subheader</li>
<li><h3></h3></li>
</ul>
</div>

Answer 3

You can define your .list>a and img tag vertical-align:top;
.list>a, img{
vertical-align:top;
}

Answer 4

.list > a {
vertical-align: bottom;
}
as you have wrap everything inside the anchor tag, we should target the a tag
here's a Jsfiddle