html - 在 html/css 中内联显示

Question

我试图在我的博客标题内以单行显示一些元素，但我在其中遇到 Logo 问题。

这是我的代码:

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">
        <a href='#'><li style='float:left;'><img src="header2.png"></li></a>
        <a href=""><li></li></a>
        <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>

结果是这样的:

如您所见，logo 与其他元素的顺序不一致，我该怎么办？

谢谢。

Answer 1

修复对齐

要修复对齐方式，您只需引入 vertical-align 属性即可将所有内容对齐到顶部:

.list {
    ...
    vertical-align: top;
}

使您的 HTML 有效

您的标记的一个问题是 ul 元素必须只包含 li 子元素。您当前的 ul 元素有 a 子元素，其中包含 li 元素 - 这是无效的。将 a 元素包装在 li 元素中:

<ul>
    <li>
        <a></a>
    <li>
</ul>

让你的 HTML 语义化

您需要问自己一些关于当前标记的问题:

1. 这是什么列表？为什么使用 ul 元素而不是 header 元素？
2. 为什么要使用 p 元素作为“SubHeader”？