水平CSS清单 [英] CSS list-horizontal
本文介绍了水平CSS清单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我正在尝试复制此网站模板:链接
So I'm trying to copy this website template: link
我想像上面的链接一样使列表项水平放置，但是它不适用于 display:inline block ，这是我在Google和该论坛上看到的，我也尝试过使用 float .我尝试搜索几种方法，包括使用 table ，但这也不起作用.这可能是我忽略的愚蠢错误，但我无法似乎找到了解决方案.
I want to make the list items horizontal like in the link above, But it just doesnt work with display:inline block which is what I've seen from google and this forum, I also tried to use float.I have tried to search several ways including using a table but it doesn't work either.This is probably a stupid mistake Im overlooking but I can't seem to find a solution.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>title</title>
</head>
<body>
<div class="header">
<a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
<h1>Belle & Carrie</h1>
</a>
<span>rehabilitation yoga
</span>
</div>
<ul class="listHorizontal">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li></li>
</ul>
</body>
</html>
CSS:
body {
background: #077054;
color: #315f52;
}
.header {
text-align: center;
}
.header a {
text-decoration: none;
color: #99fa99;
font-size: 20px;
font-weight:normal;
font-family: "latoregular";
}
.header span {
color: #b6d8cf;
font-size: 26px;
text-transform: uppercase;
font-family: 'nixie_oneregular';
}
.listHorizontal {
color: #b6d8cf;
font-size:30px;
text-transform: uppercase;
list-style: none;
display:inline-block;
}
推荐答案
您可以通过以下方式进行操作:
You can do it in following way:
body {
background: #077054;
color: #315f52;
}
.header {
text-align: center;
}
.header a {
text-decoration: none;
color: #99fa99;
font-size: 20px;
font-weight:normal;
font-family: "latoregular";
}
.header span {
color: #b6d8cf;
font-size: 26px;
text-transform: uppercase;
font-family: 'nixie_oneregular';
}
.listHorizontal {
display: flex;
justify-content: space-around;
color: #b6d8cf;
font-size:30px;
text-transform: uppercase;
list-style: none;
} <div class="header">
<a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
<h1>Belle & Carrie</h1>
</a>
<span>rehabilitation yoga
</span>
</div>
<ul class="listHorizontal">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<li></li>
</ul>这篇关于水平CSS清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
