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元素包含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添加到列表项，它们将处于正确的对齐状态。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

因为你已将所有内容包装在锚标记中，我们应该定位标记

这里是Jsfiddle