我在 HTML5 中有重叠的按钮答案

【问题标题】：I have overlapping buttons in HTML5我在 HTML5 中有重叠的按钮
【发布时间】：2017-04-28 06:47:38
【问题描述】：

我有两个按钮，一个在左边，一个在右边。出于某种原因，当我放大时，我看到了我的主按钮，后面还有一个更大的按钮。当我悬停时它们都会改变颜色，并且都是可点击的，但只有前面的主要链接我想去的地方。我希望主按钮后面的神秘出现按钮消失。我觉得可能跟宽度有关系，但是设置为180px，高度是auto。

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="setupstylesheet.css">
        <title>Setting up Your Website Folders</title>
    </head>
    <body>
        <div id="body">
            <img src="Images/web-development-banner.jpg" width="100%" height="400">
            <h1 class="webheading">Website Developement</h1>
            <div class="margin">
                <div class="shading">
                    <h1>2. Setting Up Your Website Folders</h1>
                    <p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
                    <ol>
                        <li> Create a folder on your hard drive or a USB called "Website".</li>
                        <li>Open a blank Notepad++ document.</li>
                        <li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
                        <li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
                        <li>Inside your "Website" folder, create another folder called "Images".</li>
                        <li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
                    </ol>
                    <p>Your website folder should now look something like this:</p>
                    <img src="Images/webfolderdemo.jpg" width="80%" height="80%">
                    <p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
                    <div class="needs">
                        <a href="index.html">
                            <button type="button" class="needs">1. Things you need</button>
                        </a>
                    </div>
                    <div class="extrainfo">
                        <a href="extrainfo.html">
                            <button type="button" class="extrainfo">3. Extra Information</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#body {
    background: url(Images/bigimage.jpg);
    background-color:#000000;
    background-size: 100% 100%;
    width: auto;
    height: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0px;
    margin-top: 0px;
    color: #FFFFFF;
}

.webheading {
    size: 300px;
    text-align: center;
    color: #FFFF00;
    font-family: "Arial Black", Gadget, sans-serif;
}

.needs {
    display: inline-block;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
    border: 2px solid #FFFF00;
    background-color: #00FF00;
    border-radius: 10px;
    height: auto;
    width: 180px;
}

.needs:hover {
    background-color: #4CAF50;
    color: white;
}

.extrainfo {
    float: right;
    display: inline-block;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
    border: 2px solid #FFFF00;
    background-color: #00FF00;
    border-radius: 10px;
    height: auto;
    width: 180px;
}

.extrainfo:hover {
    background-color: #4CAF50;
    color: white;
}

.margin {
    margin-left: 20px;
    margin-right: 20px;
 }

.shading {
    border-radius: 15px;
    width: auto;
    height: auto;
    padding: 10px 25px;
    text-align: left;
    background-color:rgba(0, 0, 0, 0.6)
}

【问题讨论】：

我不确定您的按钮及其容器是否应该具有相同的类。它将在两个元素上应用 css。
我同意@j-printemps，从外观上看，您可以通过简化标记来实现预期的结果；将 needs 类移动到 a 并完全删除 div 和 button 元素。

标签： html css button overlap overlapping

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="setupstylesheet.css">
        <title>Setting up Your Website Folders</title>
    </head>
    <body>
        <div id="body">
            <img src="Images/web-development-banner.jpg" width="100%" height="400">
            <h1 class="webheading">Website Developement</h1>
            <div class="margin">
                <div class="shading">
                    <h1>2. Setting Up Your Website Folders</h1>
                    <p>In order to have a website, you need to have it set our in a specific way, but make it easy to navigate. This is how you set up your website folders and files:</p>
                    <ol>
                        <li> Create a folder on your hard drive or a USB called "Website".</li>
                        <li>Open a blank Notepad++ document.</li>
                        <li>Save the blank document in your "Website" folder with the name "Index", and a file extension of ".html".</li>
                        <li>Open another blank Notepad++ document and call it "StyleSheet" with the file extension of ".css". Save it in your "Website: folder as well.</li>
                        <li>Inside your "Website" folder, create another folder called "Images".</li>
                        <li>If you wish to include music on your website, create another folder in your "Website" folder called "Audio".</li>
                    </ol>
                    <p>Your website folder should now look something like this:</p>
                    <img src="Images/webfolderdemo.jpg" width="80%" height="80%">
                    <p>Remember whenever you add pictures, put them in the "Images" folder, and music or other audio, put in the "Audio" folder."
                    <div class="button-wrap">
                        <a href="index.html">
                            <button type="button" class="needs">1. Things you need</button>
                        </a>
                    </div>
                    <div class="button-wrap">
                        <a href="extrainfo.html">
                            <button type="button" class="extrainfo">3. Extra Information</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

css -->

.button-wrap {
    display: inline-block;
    width: 171px;
}

从 .extraininfo 中删除 float:right 移除了两个按钮的宽度。

【讨论】：

【解决方案2】：

你可以像这样简化你的标记：

<div class="container">
  <a href="index.html" class="button needs">
    1. Things you need
  </a>
  <a href="extrainfo.html" class="button extrainfo">
    3. Extra Information
  </a>
</div>

CSS 可能是这样的：

    .container {
      text-align: center;
    }

    .button_test {
      display: inline-block;
      font-weight: bold;
      font-family: "Arial Black", Gadget, sans-serif;
      border: 2px solid #FFFF00;
      background-color: #00FF00;
      border-radius: 10px;
      height: auto;
      width: 180px;
    }

    .button_test.extrainfo {
      // CSS for .extrainfo
    }`

【讨论】：

【解决方案3】：

这是因为您的按钮是“浮动的”。你不应该在button 和容器上拥有与上面在 cmets 中提到的相同的类。

一旦您的button/div 班级情况得到解决，您可以在容器上使用clear: both; 和/或display: block；或display: block-inline;，这应该会阻止按钮重叠。

【讨论】：

【解决方案4】：

只要更改绑定到按钮的类中的“float”属性，按钮就不会再重叠了。

如果我没记错的话，如果您在按钮上添加“填充”属性，则可以保持“浮动”

【讨论】：

【解决方案5】：

好的。我修好了。

我愚蠢地为我的 div 和按钮设置了相同的类名，所以这就是它加倍的原因。我还找到了一个更简单的解决方案，可以将我的按钮与彼此对齐在同一行。我没有在每个按钮周围放置一个 div，而是这样做了：

HTML：

<div>
                        <a href="index.html">
                            <button type="button" class="needs">1. Things you need</button>
                        </a>
                        <a href="extrainfo.html">
                            <button type="button" class="extrainfo">3. Extra Information</button>
                        </a>
                    </div>

至于 CSS，无需更改：

.needs {
    display: inline-block;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
    border: 2px solid #FFFF00;
    background-color: #00FF00;
    border-radius: 10px;
    height: auto;
    width: 180px;
}

.needs:hover {
    background-color: #4CAF50;
    color: white;
}

.extrainfo {
    float: right;
    display: inline-block;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
    border: 2px solid #FFFF00;
    background-color: #00FF00;
    border-radius: 10px;
    height: auto;
    width: 180px;
}

.extrainfo:hover {
    background-color: #4CAF50;
    color: white;
}

【讨论】：