Question

，这是我第一次尝试在www.codeacademy.com之外尝试制作一些CSS时遇到的麻烦。

运行代码时，我发现标题中的文本未对齐，并且“注销”被向右推，而不是与“我的库存”到边缘的距离相同。

我在做什么错了？

还可以随时告诉我我是否在组织不良的事情或其他事情，所以我可以学习。我希望这是这样的正确地方！

HTML代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blank</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

  <div class="container">
    <div class="header">
      <header>
        <ul>
          <li> <a class="active" href="#home">My Inventory</a></li>
          <li><a class="browse" href="#browse">Browse Papers</a></li>
          <li><a class="build" href="#build">Build A Paper</a></li>
          <li><a class="data" href="#data">View Data</a></li>
          <li style="float:right"><a class="admin" href="#admin">Settings</a></li>
          <li style="float:right"><a class="logout" href="#logout">Log Out</a></li>
        </ul>
      </header>
    </div>

  </div>

  </body>
</html>

CSS

html {
  font-family: "PT Sans", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  min-height:100%;
  min-width:100%;
  display: grid;
}

a {
  text-decoration: none;
}

.header{
  font-size: 18px;
  line-height: 1.25pt;
  background-color: #00AFB5;
  width: 100%;
  height: 50px;
  top: 0;
  margin: 0;
  padding-top: 20px;
  padding-bottom:20px;
  padding-left: 10px;
  padding-right: 10px;
  list-style-type: none;
}

.header li {
  display: inline-block;
}

.header a {
  display: block;
  color: #fff;
}

Answer 1

使用引导程序，它为您提供了很多调整视口大小并保持样式外观的选项。这是使用链接设置引导的默认示例。在snipit中以全页模式查看。

https://getbootstrap.com/

https://getbootstrap.com/docs/4.0/components/navbar/

注意：：如果您希望更改样式，我将使用CDN作为示例下载引导文件。

搜索引导css文件。
打开（bootstrap.css）文件并搜索“ primary”。
将其更改为所需的颜色。
您可以在此处更改任何主题颜色。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link active" href="#home">My Inventory</a>
            </li>
            <li class="nav-item">
                <a class="nav-link browse" href="#browse">Browse Papers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link build" href="#build">Build A Paper</a>
            </li>
            <li class="nav-item">
                <a class="nav-link data" href="#data">View Data</a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link admin" href="#admin">Settings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link logout" href="#logout">Log Out</a>
            </li>
        </ul>
    </div>
</nav>

以整页模式运行snipit。

CSS-标题到右边的间距不等于左边的间距

1 个答案: