html / css中的内联显示

Question

我正在尝试在我的博客标题内的单行中显示一些元素，但徽标存在问题。

这是我的代码：

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>

结果是这样的：

如您所见，徽标与其他元素不匹配，我该怎么办？

谢谢。

Answer 1

固定对齐

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

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

使您的HTML有效

标记的问题是ul元素只能包含li ul元素。 您当前的ul元素有a子元素，其中有li元素-这是无效的。 将您的a元素包装在li元素内：

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

使HTML语义化

您需要问自己一些有关当前标记的问题：

1. 这是什么清单？ 为什么使用ul元素而不是header元素？
2. 为什么将p元素用作“ SubHeader”？

Answer 2

您可以定义.list>a和img标签vertical-align:top;

.list>a, img{
vertical-align:top;
}

Answer 3

首先，让我们重新排列您的HTML，以便代码有效。 列表（ ul ）具有列表项（ li ）。 列表项可能包含锚点，段落，标题等。反之则不行。

然后，我们需要稍微更改CSS，以便锚点获得正确的颜色。

但是最重​​要的是表格单元的垂直对齐。 通过向列表项添加vertical-align ，它们将处于正确的对齐状态。

 .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><a href="#"><img src="http://placehold.it/150x75" /></a></li> <li><a href="#"></a></li> <li><h1><a href="#">Header of my blog</a></h1></li> <li><a href="#">Subheader</a></li> <li><h3><a href="#"></a></h3></li> </ul> </div> 

Answer 4

.list > a {
    vertical-align: bottom;
}

当您将所有内容都包裹在anchor标签内后，我们应该将标签定位

这是一个Jsfiddle