Question

如何制作漂亮的标题/导航部分？

这是我的代码：

＆＃13;

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}

＆＃13;

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

＆＃13;

所以我想要的。我希望文本在中间多一点。等等！让我们以另一种方式告诉它。你看到了＃Stack; StackExchange＆＃39;上面的导航栏？嗯，这就是我想要的。我希望文本在右侧（但在中间区域居中），然后在左侧显示一个徽标（但也在中间区域居中）。

我试图提高我在HTML5中的认知度。所以我开始使用导航和标题功能。

Answer 1

一个出色的HTML5 / CSS3定位解决方案是CSS Flexbox。

要开始使用此功能，请将display:flex添加到<ul>。然后，它的内部项可以通过各种方式定位，包括Flex容器（<ul>）或flex子项（<li>）。

为了防止你的<ul>和它的孩子伸得太宽（就像堆栈溢出导航一样），我已经给它设置了80％的设置宽度，然后将它居中放在<nav>也使用flexbox。

Flexbox是一个非常多功能的定位工具，您可以阅读更多关于它的信息here。

＆＃13;

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav {
  display:flex;
  justify-content:center;
  }

ul {
  margin:0 auto;
  width:80%;
  display:flex;
  justify-content:space-between;
  }

#logo {
  margin-right:auto;
  }
  
nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}

＆＃13;

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li id="logo"><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

＆＃13;

导航之间的空间

1 个答案: