我有两个按钮，一个在左边，一个在右边。出于某种原因，当我放大时，我会看到我的主按钮，后面有一个更大的按钮。当我悬停时它们都会改变颜色，并且都可以点击，但只有前面的主要链接我想去的地方。我希望主要背后的神秘出现按钮消失。我认为这可能与宽度有关，但设置为180px，高度为自动。
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)
}
答案 0 :(得分：0)
这是因为你的按钮是“漂浮的”。你不应该在评论中提到的button和容器上拥有相同的课程。
修复button / div班级情况后，您可以在容器上使用clear: both;和/或display: block;或display: block-inline;，这应该会阻止按钮重叠。
答案 1 :(得分：0)
<!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 - ＆gt;
.button-wrap {
display: inline-block;
width: 171px;
}
从.extrainfo中删除float：right 删除了两个按钮的宽度。
答案 2 :(得分：0)
您可以像这样简化标记：
<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 :(得分：0)
只要更改绑定到按钮的类中的“float”属性，按钮就不会重叠了。
如果我没有弄错的话，如果你在按钮上添加“填充”属性，你可以保持“浮动”
答案 4 :(得分：0)
行。我修好了。
我愚蠢地为我的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;
}