Question

当我调整全新的html和css页面的大小时，它看起来也不是我想要的样子。以下是我网站的理想外观。

但是，当我全屏显示时，网站看起来像这样，

如您所见，页面上的单词向右偏移太多，我该如何解决？

这是我的代码。

<body>

<header>
    <div class="container">
      <h1 class="logo"></h1>

      <nav>
        <ul>
          <font color="white"><li><a href="#">Home</a></li></font>
          <font color="white"><li><a href="#">About</a></li></font>
          <font color="white"><li><a href="#">Pricing</a></li></font>
          <font color="white"><li><a href="#">Contact</a></li></font>
       </ul>
      </nav>
    </div>
  </header>

    </body>






body {
    margin: 0;
    background: white;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {

background-image: linear-gradient(darkblue, royalblue);
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: white;

  position: absolute;
  top: 0;
  width: 0%;


  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

注意：我从一段精彩的视频中借用了这段代码，介绍如何制作导航栏。

https://www.youtube.com/watch?v=FEmysQARWFU

Answer 1

只需增加'list'元素'margin-left'css，如下所示。另外，您可以删除“字体”元素。它们是无效的html5，对于您而言，它们是多余的，因为您已经在css中分配了白色。

nav li {

  margin-left: 100px;

  }

调整HTML和CSS中所需的辅助工具

1 个答案: