如何从 HTML 和 CSS 中删除重复元素？答案

【问题标题】：How to remove duplicate elements from HTML & CSS?如何从 HTML 和 CSS 中删除重复元素？
【发布时间】：2022-01-26 07:23:08
【问题描述】：

这里是新手。不想让自己难堪，但在浏览对类似问题的回复时，我找不到令人信服的解决方案，因此我为造成滋扰而道歉。我正在设计我的 neocities 页面，这是我第一次使用 HTML 和 CSS。一切都很好，除了出于某种原因在我的页面底部有一个重复框（？）。非常抱歉我的灾难性和凌乱的代码，因为我几乎不知道我在处理什么。如果你有耐心，请帮助我。旁注：它似乎是在我调整了按钮的边距后出现的，但我不能肯定The white space looks like this。 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>blog title</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
        <style>
            <style type="text/css" media="screen">
      </style>
      </head>
        <body>
                        <div class="box"></div>
        </body>
    <div class="content">
        <h1>welcome</h1>
    <p>introducrion</p>
          <div style="text-align: center;">
                              <button class="button1">buttonname1</button>
            <button class="button2">buttonname2</button>
                        <button class="button3">buttonname3</button>
                        <button class="button4">buttonname4</button>
                                    <button class="button5">buttonname5</button>
        </div>
    </div>
</html>

CSS：

body {
            background-image: url('https://img.hmv.co.jp/image/jacket/400/79/1/8/014.jpg');
}
h1{
    text-align: center;
    background-color: #ffffff;
}
.content{
    width: 700px;
    height: 680px;
    margin: auto;
    background: #ffffff;
    padding: 30px;
}
.container{
    position: relative;
}
.box{
    position: absolute;
}
.style
            @font-face{
                font-family: 'Robotic Monkey';
                src: url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff") format("woff"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.svg#Robotic Monkey") format("svg");
            font-weight: normal;
                font-style: normal;
            }
            .logo h1{
             font-family: Robotic Monkey;
                 font-size: 45pt;
                color: black;
                text-align: center;
            }
@font-face{
    font-family: "Robotic Monkey";
    src: url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff") format("woff"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.svg#Robotic Monkey") format("svg");
}
h1{
    font-family: 'Robotic Monkey';
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: monospace;
}
p{
    font-family: monospace;
    font-weight: bold;
    font-style: normal;
    color: black;
    font-size: 11pt;
    text-align: center;
}
            div{
            background: #ffffff;
            border-radius: 25px;
            height: 680px;
}
.button1{
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color:black;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    font-weight:bold;
    line-height: 0px;
    margin: auto;
    min-height: 60px;
    min-width: 300px;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    will-change: transform;
    width: 50%;
    position: relative;    
}
.button2{
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color:black;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    font-weight:bold;
    line-height: 0px;
    margin: auto;
    margin-top: 10px;
    min-height: 60px;
    min-width: 300px;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    will-change: transform;
    width: 50%;
    position: relative;    
}
.button3{
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color:black;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    font-weight:bold;
    line-height: 0px;
    margin: auto;
    margin-top: 10px;
    min-height: 60px;
    min-width: 300px;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    will-change: transform;
    width: 50%;
    position: relative;    
}
.button4{
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color:black;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    font-weight:bold;
    line-height: 0px;
    margin: auto;
    margin-top: 10px;
    min-height: 60px;
    min-width: 300px;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    will-change: transform;
    width: 50%;
    position: relative;    
}
.button5{
    display: block;
    padding: 16px;
    background-color: #ffffff;
    border: 2px solid #1A1A1A;
    border-radius: 15px;
    box-sizing: border-box;
    color:black;
    display: inline-block;
    font-family: monospace;
    font-size: 16px;
    font-weight:bold;
    line-height: 0px;
    margin: auto;
    margin-top: 10px;
    min-height: 60px;
    min-width: 300px;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    will-change: transform;
    width: 50%;
    position: relative;

【问题讨论】：

您的 HTML 无效。你不能在body之外有任何内容（在你的情况下是<div class="content">）
validator 可能是一个很好的起点

标签： html css

【解决方案1】：

此代码中有两个高度值。

类内容高度：680px；
按钮包装容器 div 高度：680px;

对于您提到的问题，您需要删除按钮包装容器的 div 高度。

希望，它会有所帮助。

【讨论】：

【解决方案2】：

在你的 CSS 中，设置div { height:auto } 然后重复框就会消失。

【讨论】：

【解决方案3】：

问题是由高度不同的两次潜水（.content，div）引起的。

改变 div 的高度。

   div {
background: #ffffff;
border-radius: 25px;
height: 450px;

}

【讨论】：