我想复制这个设计
到目前为止,我只成功创建了其中的一部分。我不知道如何对齐信息下方的标题,以便始终与上方的文本居中。例如,当信息较小或较大时,对齐将关闭。 任何帮助,将不胜感激。
.list-inline {
list-style: none;
padding: 0;
}
.list-inline > li {
display: inline;
}
/*.list-pipe > li:not(:last-child)::after {
content: '|';
margin: 0 .25em;
}*/
.list-pipe > li {
border-right: 1px solid #00000065;
margin: 0 .25em;
padding: 1em 1em 2em 1em;
font-size: 15px;
letter-spacing: 0.79px;
text-align: center;
color: #11A8A1;
}
.list-inline > li:last-child {
border-right: none;
}
.list-caption {
list-style: none;
padding: 0;
margin-left: 54px;
}
.list-caption > li {
display: inline;
padding-right: 30px;
font-size: 15px;
letter-spacing: 0.79px;
text-align: center;
}
.list-caption > li:first-child {
display: inline;
padding-right: 51px;
font-size: 15px;
letter-spacing: 0.79px;
text-align: center;
}
<ul class="list-inline list-pipe" >
<li>
Germany
</li>
<li>
1914-18
</li>
<li>
German
</li>
</ul>
<ul class="list-caption" >
<li>
Place
</li>
<li>
Year
</li>
<li>
Language
</li>
</ul>
最佳答案
我已经更新了您的html
和css
代码
请告诉我这是否适合你
ul.list-inline.list-pipe {
width: 100%;
display: flex;
align-items: flex-start;
flex-wrap: nowrap;
}
ul.list-inline.list-pipe li {
width: 33%;
display: inline;
font-size: 15px;
letter-spacing: 0.79px;
text-align: center;
color: #11A8A1;
border-left: 1px solid #d0d0d0;
}
ul.list-inline.list-pipe li:first-child {
border-left: none;
}
ul.list-inline.list-pipe li span {
display: block;
margin-top: 10px;
color: #000;
}
<ul class="list-inline list-pipe" >
<li>
Germany
<span>Place</span>
</li>
<li>
1914-18
<span>Year</span>
</li>
<li>
German
<span>Language</span>
</li>
</ul>
关于列表项的 HTML/CSS 中心标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54885031/