个人中心
gpt4 book ai didi

html - 没有填充的 Div 空间

转载 作者：太空宇宙 更新时间：2023-11-03 21:02:11 25 4
gpt4 key购买 nike

我正在设计一个带有导航栏的网站，后跟两列。出于某种原因，导航栏在顶部、左侧和右侧显示有填充，即使我没有添加任何这些属性。

导航栏和两列应该具有相同的宽度，但目前情况并非如此:

enter image description here 

    @font-face {
      font-family: 'Open Sans', sans-serif;
      src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('woff');
    }
    
    html {
      min-height: 100%;
    }
    
    body {
      font-family: 'Open Sans', sans-serif;
    }
    
    .nav {
      background-color: rgba(0, 0, 0, 0.75);
      height: 50px;
      width: 100%;
    }
    
    .nav a {
      float: left;
      color: #f2f2f2;
      padding: 14px;
      text-decoration: none;
      font-size: 17px;
      margin: 0;
    }
    
    .nav a:hover {
      text-shadow: 0px 0px 20px #ffffff;
    }
    
    .nav a:active {
    color: black;
    }
    
    .nav-right {
      float: right;
    }
    
    .nav img {
      float: left;
      width: 40px;
      height: 40px;
      line-height: 4em;
      margin-left: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    
    .column {
      float: left;
      width: 50%;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
      width: 100%;
    }
    
    #hero-image {
      max-width: 50vw;
    }
        <!DOCTYPE html>
    <html lang="en" class="home">
    <head>
    	<meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1">
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
        <div class="nav">
        <a href="/">Title</a>
        <div class="nav-right">
          <a href="/">Link</a>
          <a href="/explore">Link</a>
        </div>
      </div>
    
      <div class="row">
          <div class="column">
              1
          </div>
          <div class="column">
              <img src="https://i.imgur.com/raVKyuB.jpg" id="hero-image" alt="Attraction">
          </div>
        </div>
          <footer>
             <p>Copyright &copy; 2019</p>
       </footer>
    </body>
    </html>

最佳答案

首先，你有这个:

.nav-right {
  float: right;
  margin-right: 10px;
}

这会导致 .nav-right 元素右边有 10px 的空间。

其次，您应该将 margin: 0 添加到 html 和 body 以避免它们的默认边距。

关于html - 没有填充的 Div 空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59121101/

25 4 0
文章推荐： c# - 使用c#获取两个不同对象的公共(public)属性
文章推荐： python - 如何指定 pcolormesh 的轴？
文章推荐： c# - 为什么用户自定义类没有 "declared but never used"警告？
文章推荐： c# - 如何在 ORACLE 中使用单个命令运行一次更新和提交
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com