我已经在该网站上查看了许多有关此问题的教程，但没有任何效果。另外，代码主要来自我正在修改的模板。我该如何解决这个问题，以使“旋律”和“安妮”按钮的大小相同且不会重叠？这是我的代码：
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
.custom {
width: 78px !important;
}
/* Melody */
.btn-Melody {
color: #333;
text-shadow: none;
background-color: #a9cafc;
border: 0.05rem solid #a9cafc;
}
.btn-Melody:hover {
color: #333;
background-color: #72a8f9;
border: 0.05rem solid #72a8f9;
}
.btn-Melody:focus {
color: #333;
text-shadow: none;
border: 0.05rem solid #72a8f9;
}
/* Anne */
.btn-Anne {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #a9fcab;
border: 0.05rem solid #a9fcab;
}
.btn-Anne:hover {
color: #333;
background-color: #5bff5f;
border: 0.05rem solid #5bff5f;
}
.btn-Anne:focus {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #fff;
border: 0.05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
/*background-image: url("Anne.png")*/
}
body {
color: #ffffff;
text-align: center;
text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100vh;
/* For at least Firefox */
min-height: 100%;
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 2rem;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: 0.25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
border-bottom: 0.25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.nav-masthead .nav-link+.nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: 0.75rem 1.25rem;
font-weight: 700;
}
/*
* Footer
*/
.mastfoot {
color: #000000;
}
/*
* Affix and center
*/
@media (min-width: 40em) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
/* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 62em) {
.masthead,
.mastfoot,
.cover-container {
width: 42rem;
}<link rel="stylesheet" href="template.css">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<header class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<body>
</body>
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-Melody custom">Melody</a>
<p>
<a href="#" class="btn btn-lg btn-Anne custom">Anne</a>
</p>
<footer class="mastfoot">
<div class="inner">
<p>Website by
<a href="#">ChloeM</a>.</p>
</div>
</footer>
</div>
</div>
</div>
我试图制作一张桌子，试图添加！important，使它们成为固定宽度，但它似乎没有用。
答案 0 :(得分：0)
由于第二个按钮用margin包装到了一个段落中，因此发生了元素重叠。从段落中删除按钮，就可以了。您也可以在段落中使用填充而不是空白，并且项目不会重叠。
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
.custom {
width: 78px !important;
}
/* Melody */
.btn-Melody {
color: #333;
text-shadow: none;
background-color: #a9cafc;
border: 0.05rem solid #a9cafc;
}
.btn-Melody:hover {
color: #333;
background-color: #72a8f9;
border: 0.05rem solid #72a8f9;
}
.btn-Melody:focus {
color: #333;
text-shadow: none;
border: 0.05rem solid #72a8f9;
}
/* Anne */
.btn-Anne {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #a9fcab;
border: 0.05rem solid #a9fcab;
}
.btn-Anne:hover {
color: #333;
background-color: #5bff5f;
border: 0.05rem solid #5bff5f;
}
.btn-Anne:focus {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #fff;
border: 0.05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
/*background-image: url("Anne.png")*/
}
body {
color: #ffffff;
text-align: center;
text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100vh;
/* For at least Firefox */
min-height: 100%;
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 2rem;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: 0.25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
border-bottom: 0.25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.nav-masthead .nav-link+.nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: 0.75rem 1.25rem;
font-weight: 700;
}
/*
* Footer
*/
.mastfoot {
color: #000000;
}
/*
* Affix and center
*/
@media (min-width: 40em) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
/* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 62em) {
.masthead,
.mastfoot,
.cover-container {
width: 42rem;
}<link rel="stylesheet" href="template.css">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<header class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<body>
</body>
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-Melody custom">Melody</a>
<a href="#" class="btn btn-lg btn-Anne custom">Anne</a>
<footer class="mastfoot">
<div class="inner">
<p>Website by
<a href="#">ChloeM</a>.</p>
</div>
</footer>
</div>
</div>
</div>