Html 我怎样才能把我的头放在我的导航栏中间呢？_Html_Css_Position

Html 我怎样才能把我的头放在我的导航栏中间呢？

html css

Html 我怎样才能把我的头放在我的导航栏中间呢？,html,css,position,Html,Css,Position,如何设置导航和头部的位置，使其看起来像这样我一直在尝试在google和stack overflow上搜索，但什么也找不到这是我的密码，谢谢正文 { 背景图片：url（'bground.png'）；文本对齐：居中；字体系列：arial； } #换行{边距：0自动；宽度：700px；} #标题{ } ul，li，a{ 显示：内联；列表样式：无；字体系列：arial；颜色：#000000；文字装饰：无；字体大小：25px； } 李，a:悬停{ 显示：内联；列表样式：无；字体

如何设置导航和头部的位置，使其看起来像这样

我一直在尝试在google和stack overflow上搜索，但什么也找不到

这是我的密码，谢谢

正文
{
背景图片：url（'bground.png'）；
文本对齐：居中；
字体系列：arial；
}
#换行{边距：0自动；宽度：700px；}
#标题{
}
ul，li，a{
显示：内联；
列表样式：无；
字体系列：arial；
颜色：#000000；
文字装饰：无；
字体大小：25px；
}
李，a:悬停{
显示：内联；
列表样式：无；
字体系列：arial；
字体大小：25px；
颜色：#ffdc99；
}
#内容{
背景：#ffffff；
最大宽度：800px；
左边距：自动；
右边距：自动；
文本对齐：居中；
垂直对齐：底部对齐；
}
/*编辑*/
#标题，
#内容{清除：两者；}
#标题，
#收割台h1，
#标题#nav{float:left；}


易受骗的
易受骗的






易受骗的

家
商店
拜访
接触

试试Flexbox和

弹性项均匀分布，以便两个相邻项之间的空间相同。第一个项目之前和最后一个项目之后的空白空间等于两个相邻项目之间空间的一半

ul{
显示器：flex；
列表样式类型：无；
证明内容：周围的空间；
对齐项目：居中；
底部边框：2件纯黑；
填充：0；
}
.标志{
字体大小：30px；
字体大小：粗体；
填充：10px0；
}
a{
文字装饰：无；
颜色：黑色；
}

只需将您的

放在一个新的

中现有的

的中心即可
<ul id="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="shop.html">Shop</a></li>
    <li><h1>Gullible</h1></li>
    <li><a href="home.html">Visit</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>




轻信的



在这里，您可以找到一个如何实现这一目标的示例
<!DOCTYPE html>
<body>
  <div id="wrap">
    <div id="logo">
      <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><h1>Gullible</h1></li>
        <li><a href="home.html">Visit</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div id="content">
      <h1></h1>
    </div>
  </div>

  <footer>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li><h2>Gullible</h2></li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>

ul {
  text-align: center;
}

ul li {
  display: inline-block;
}