我正在尝试使以下页面水平,而不是垂直。我想这样做,因为它是网站顶部的标题。谢谢。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
代码问题:
<header>
元素错误,应该<head>
。- 没有
<html>
标签。 </header>
是孤立的。</body>
和</head>
没有结束标签。
只需做两件事:
- 卸下
<ul>
的width
。 - 为
<li>
添加display: inline-block
。
法典:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
ul li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
请尝试下面的css属性以获取li
float: left;
您的代码有几个错误:看看这个:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
/* width: 200px;*/
background-color: #f1f1f1;
}
li {display: inline-block}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
你需要为li输入"display:inline-block"。
<style>
ul li{
display:inline-block;
width: 20%; /* put width as per your requirement*/
}
</style>
将其显示为水平display:inline-block
添加,width
将自动显示为日志。 如果你不需要将宽度更改为px'
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:auto;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li{display:inline-block;}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>