如何将我的标题列表居中？ （V2） [英] How do I center my header list? (V2)
问题描述
我正在尝试用一些像样的css制作一个标题并且出错了：当我用我的localhost（通过XAMPP）测试它时，列表不在我的背景中间，而是在上面。
如何解决这个问题？
问候，
Andreas
< ！DOCTYPE html >
< html >
< header >
< link rel = stylesheet type = text / css href = header.css >
< ul >
< li > < a href = > 主页< / a > < / li >
& li > < a href = > 关于< / a > < / li >
< li > < a href = > 续act < / a > < span class =code-keyword>< / li >
< li > < a href = > ; 议程< / a > < / li >
< li > < a href = > 菜单< / a < span class =code-keyword>> < / li >
< p > Cafe < strong > Welkom < / strong > < / p > < br >
< / ul >
< / header >
< / html >
我尝试过：
CSS：
header
{
text-align：center;
list-style-position：outside;
}
ul {
list-style-type：none;
margin：0;
padding：0 ;
溢出：隐藏;
背景颜色：＃333;
}
li {
浮动：离开;
}
li a {
字体大小：15px;
显示：块;
颜色：white;
text-align：center;
padding：14px 16px;
text-decoration：none;
$ / b $ b $
li a：悬停{
background-颜色：darkkhaki;
}
p
{
font-family：sans-serif;
color：lightgoldenrodyellow;
}
我做了一些改动。首先，我从顶部取出边距和填充，并将标题包裹在一个名为标题的div中，以获得100％的宽度效果，然后将li作为div的中心;所以它可以居中。此外，p被移动到li中，因此它是无序列表的一部分。为了获得漂亮的字体，我把它包裹在一个范围内。
* {
< span class =code-attribute> margin ： 0;
< span class =code-attribute> padding ： 0;
}
＃ header { width ： 50％; margin-top ： 0px;
margin-left ： auto;
margin-right ： auto; }
＃标题 {背景 ： ＃333; 宽度 ： 100％; height ： 50px; margin-top ： 0px; }
标题
{
text-align ： center;
list-style-position ： outside;
}
ul li {
list-style-type ： 无;
margin ： 0;
padding ： 0;
溢出 ： hidden;
}
li {
float ： left;
}
li a {
font-size ： 15px;
/ * display：block; * /
color ：white;
text-align ： center;
padding ： 14px 16px;
text-decoration ： none;
}
li a：悬停 {
background-color ： darkkhaki;
}
span
{
font-family ： sans-serif;
color ： 轻tgoldenrodyellow;
}
< ！DOCTYPE html >
< html >
< head >
< link rel = 样式表 类型 = text / css href =< /跨度>header.css>
< / head >
< ; 正文 >
< div id = 标题 >
< div id = header >
< ul >
< li > < a href = > 主页< / a > < / li >
< li > < a href = > 关于< / a > < / li >
< li > < a href = > 联系< / a > < < span class =code-leadattribute> / li >
< li > < < span class =code-leadattribute> a href = > 议程< / a > < ; / li >
< li > < a href = > 菜单< / a > < / li >
< li > < span > Cafe < 强 > Welkom < / strong > < ; / span > < / li >
< / ul >
< / div >
< / div >
< body >
< / html >
I am trying to make a header with some decent css and something was wrong: When I tested this with my localhost (via XAMPP) the list isn't centered in the middle of my background, instead it is above.
How can I solve this problem?
Regards,
Andreas
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" type="text/css"href="header.css">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Agenda</a></li>
<li><a href="">Menu</a></li>
<p> Cafe <strong> Welkom</strong></p> <br>
</ul>
</header>
</html>
What I have tried:
CSS:
header
{
text-align: center;
list-style-position: outside;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
font-size: 15px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkkhaki;
}
p
{
font-family: sans-serif;
color: lightgoldenrodyellow;
}
I made a couple of changes. Firstly, I took out margins and padding from the top and also wrapped the header in a div called heading to get the 100% width affect and then center what was the li as a div; so it could be centered. Also, the p is moved into the li so it is part of the unordered list. To gain the nice font, I wrapped it in a span.
* { margin: 0; padding: 0; } #header{width: 50%; margin-top: 0px; margin-left: auto; margin-right: auto;} #heading{background: #333; width: 100%; height: 50px; margin-top: 0px;} header { text-align: center; list-style-position: outside; } ul li{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { font-size: 15px; /*display: block;*/ color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: darkkhaki; } span { font-family: sans-serif; color: lightgoldenrodyellow; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"href="header.css"> </head> <body> <div id="heading"> <div id="header"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Agenda</a></li> <li><a href="">Menu</a></li> <li><span> Cafe <strong> Welkom</strong></span></li> </ul> </div> </div> <body> </html>
这篇关于如何将我的标题列表居中？ （V2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
