制作垂直标题水平
问题描述:
我正在尝试使下面的页面水平,而不是垂直。我想这样做,因为它意在成为网站顶部的标题。谢谢。制作垂直标题水平
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>
+0
太棒了,谢谢!添加它,似乎运作良好。感谢您的帮助! –
答
试试下面的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>
答
与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>
答
你需要把“显示:inline-block的”为李。
<style>
ul li{
display:inline-block;
width: 20%; /* put width as per your requirement*/
}
</style>
您还没有开始'',但您有一个结束标签! –
没有''! –
用于错误编码的Downvote。没有像 –