代码之家 › 专栏 › 技术社区 › xxxVxxxlinux

使用宽度时出现空白,即使背景是彩色的

css html

xxxVxxxlinux · 技术社区 · 9 月前

我试图使用width属性使这个DIV变小,但这只会产生尴尬的空白,即使我在页面顶部用!覆盖我的Bootstrap文件很重要。我该怎么解决这个问题?

我的代码:

{
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <div class="container-fluid"></div>
    <a href="about">About Me</a>
    <a href="projects">Projects</a>
    <a href="blog">Blog</a>
    <a href="contact">Contact</a>
    </div>
  </nav>
  <div class="spacer"></div>
  <section class="about-me">
    About Me

  </section>



</body>

</html>

编辑:好的,修复了它,使其包含HTML代码!

2 回复 | 直到 9 月前

Nijat Mursali 9 月前

我想这是个有点愚蠢的错误,但你忘了加 * 到css代码的第一行:

* {
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <div class="container-fluid"></div>
    <a href="about">About Me</a>
    <a href="projects">Projects</a>
    <a href="blog">Blog</a>
    <a href="contact">Contact</a>
    </div>
  </nav>
  <div class="spacer"></div>
  <section class="about-me">
    About Me

  </section>



</body>

</html>

-2

Javeria Asim 9 月前

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="container-fluid d-flex justify-content-center">
            <a href="about">About Me</a>
            <a href="projects">Projects</a>
            <a href="blog">Blog</a>
            <a href="contact">Contact</a>
        </div>
    </nav>
    <div class="spacer"></div>
    <section class="about-me">
        About Me
    </section>
</body>
</html>

这是你调整后的CSS:

html, body {
    background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Keeps everything centered */
}

.navbar a {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffd6bd;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar {
    background-color: rgb(50, 19, 32);
    width: 100%;
    padding: 15px 0;
}

.spacer {
    background-color: rgb(47, 24, 33);
    padding: 50px;
    width: 100%;
}

.about-me {
    background-color: rgb(38, 14, 24);
    color: wheat;
    display: flex;
    justify-content: center;
    padding: 50px;
    outline: wheat solid 1px;
    outline-offset: -1rem;
    width: 70%;
    margin: 0 auto;
}

编辑:我已经修改了代码。