调整Html和Css中所需的辅助大小_Html_Css_Web

调整Html和Css中所需的辅助大小

html css web

调整Html和Css中所需的辅助大小,html,css,web,Html,Css,Web,当我调整我全新的html和css页面的大小时，它看起来也不像我想要的那样。下面是我的网站的理想外观但是当我全屏的时候,这个网站是这样的, 正如你所看到的，页面上的文字向右偏移太多，我该如何解决这个问题这是我的密码 <body> <header> <div class="container"> <h1 class="logo"></h1> <nav> <ul&g

当我调整我全新的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%;
}








身体{
保证金：0；
背景：白色；
字体系列：“无衬线工作”，无衬线；
字号：800；
}
.集装箱{
宽度：80%；
保证金：0自动；
}
标题{
背景图像：线性渐变（深蓝色、皇家蓝色）；
}
标题：：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.标志{
浮动：左；
填充：10px0；
}
导航{
浮动：对；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；
}
李海军{
显示：内联块；
左边距：70像素；
填充顶部：23px；
位置：相对位置；
}
导航a{
颜色：白色；
文字装饰：无；
文本转换：大写；
字体大小：14px；
}
导航a：悬停{
颜色：#000；
}
导航a：：之前{
内容：''；
显示：块；
高度：5px；
背景色：白色；
位置：绝对位置；
排名：0；
宽度：0%；
过渡：全部缓进缓出250ms；
}
导航a:悬停：：之前{
宽度：100%；
}

注意：我从一个关于如何制作导航条的优秀视频中借用了这段代码

只需增加“list”元素“margin left”css，如下所示。此外，您还可以删除“字体”元素。它们是无效的html5，在您的例子中是多余的，因为您已经在css中指定了白色

nav li {

  margin-left: 100px;

  }

请在问题中张贴代码本身。请勿发布代码图像。请将代码作为代码片段发布。请允许我问一下，将代码发布为图像有什么不对？人们需要能够运行代码来查看它当前的功能，并测试可能的解决方案。没有人愿意花时间复制图像上的代码，因为他们可以简单地复制并粘贴它。好的，我现在已经将代码粘贴到问题中了你是一个救生员。我永远感激你。