我的按钮创建为相应行的每一列。但它们相互重叠，我只能看到创建的最后一个按钮。我的 .css 有一些问题，但我无法弄清楚是什么。 我是 HTML 和 CSS 的新手，非常感谢您的帮助
test.html
<html>
<link href="button_style.css" rel="stylesheet" type="text/css" />
<body>
<table align="center" id="scroll_tbl">
<tr>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
<a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" /> Previous</a>
</td>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
<a href='javascript:nextClick()'>Next <img src="img/arrow_right.png" class="arrow" border="0" /></a>
</td>
</tr>
<tr>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
<a href="#" class="button"><span>Follow</span></a>
</td>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
<a href="#" class="button"><span>Follow</span></a>
</td>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
<a href="#" class="button"><span>Follow</span></a>
</td>
</tr>
<tr>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
<a href="#" class="button"><span>Follow</span></a>
</td>
<td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
<a href="#" class="button"><span>Donate</span></a>
</td>
</tr>
<!--<div id="prev_next" style="background-color: #FF0000; display: inline-block;"> <div id="previous" style="display:inline-block;">Previous</div><div id="Next" style="display:inline-block;">Next</div></div>-->
<!--<div id='prev_next' style='background-color: #FF0000; display:inline-block; '><a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" /> Previous</a> <a href='javascript:nextClick()' width='100'>Next <img src="img/arrow_right.png" class="arrow" border="0" /></a></div>-->
</table>
</body>
</html>
button_style.css
@import url(http: //fonts.googleapis.com/css?family=Nunito:300);
body {
font - family: "Nunito", sans - serif;
font - size: 24 px;
}
a {
text - decoration: none;
}
p {
text - align: center;
}
sup {
font - size: 36 px;
font - weight: 100;
line - height: 55 px;
}
.button {
text - transform: uppercase;
letter - spacing: 2 px;
text - align: center;
color: #0C5;
font-size: 24px;
font-family: "Nunito", sans-serif;
font-weight: 300;
margin: 5em auto;
position: absolute;
top:0; right:0; bottom:0; left:0;
padding: 20px 0;
width: 220px;
height:30px;
background: # 0 D6;
border: 1 px solid #0D6;
color: # FFF;
overflow: hidden;
transition: all 0.5 s;
}
.button: hover, .button: active {
text - decoration: none;
color: #0C5;
border-color: # 0 C5;
background: #FFF;
}
.button span {
display: inline - block;
position: relative;
padding - right: 0;
transition: padding - right 0.5 s;
}
.button span: after {
content: ' ';
position: absolute;
top: 0;
right: -18 px;
opacity: 0;
width: 10 px;
height: 10 px;
margin - top: -10 px;
background: rgba(0, 0, 0, 0);
border: 3 px solid# FFF;
border - top: none;
border - right: none;
transition: opacity 0.5 s,
top 0.5 s,
right 0.5 s;
transform: rotate(-45 deg);
}
.button: hover span, .button: active span {
padding - right: 30 px;
}
.button: hover span: after, .button: active span: after {
transition: opacity 0.5 s,
top 0.5 s,
right 0.5 s;
opacity: 1;
border - color: #0C5;
right: 0;
top: 50%;
最佳答案
好的，有几件事:
按钮重叠的主要原因是您有以下代码:
.button { position:absolute； 顶部:0；右:0；底部:0；左:0； }
查看此链接 w3 schools positioning with css
您有几个语法错误的元素。例如，list-style 之间不需要空格。可能有效，但我认为最好不要这样做。
一些 CSS 属性对您放置它们的元素没有用处。喜欢把 list-style: none;在表格行上。
我调整了您的代码，使其按照您的要求运行，并修复了您犯的一些错误。参见 THIS fiddle 如果您还有其他问题，我很乐意为您提供进一步的帮助。
祝你好运!
关于HTML 表格列重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34755167/