下面是我正在使用的代码。在重新评估代码一个多小时后，我无法弄清楚为什么我的网格显示中的整个第三列没有正确显示。
我已经在不应该出现的地方搜索了"cursor:pointer"代码，并试图使用背景色对其进行反向工程，以找到放置问题。有人能解释一下为什么这不起作用吗？感谢所有反馈！
/* Fund Library Section */
.fund {
background: #000000;
padding: 40px 0;
}
.fund__container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.fund__container h1 {
font-size: 4rem;
color: #fff;
grid-column: 1 / span 3;
justify-self: center;
padding-bottom: 15px;
}
.row_user {
grid-column: 1;
justify-self: center;
padding-left: 35px;
background: #fff;
}
.label_title {
font-size: 25px;
padding: 0 12px 6px 0;
color: #fff;
font-weight: bold;
}
.label {
font-size: 25px;
padding: 18px 12px 6px 0;
color: #fff;
font-weight: bold;
}
.textbox {
padding-left: 10px;
}
input[type="text"],
input[type="number"],
select,
textarea {
width: 55%;
padding: 6px;
padding-left: 5px;
border: 1px solid #4287f5;
border-radius: 10px;
box-sizing: border-box;
resize: vertical;
font-size: 20px;
}
.row_button {
background: #fff;
grid-column: 2;
justify-self: center;
}
.main_btn {
font-size: 1.8rem;
background: #1e3c72;
padding: 20px 60px;
border: none;
border-radius: 4px;
margin-top: 10rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main_btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main_btn:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 0;
height: 100%;
background: #fd1d1d;
transition: all 0.35s;
border-radius: 4px;
}
.main_btn:hover {
color: #fff;
}
.main_btn:hover:after {
width: 100%;
}
.row_fund-frame {
background: #fff;
height: 100%;
grid-column: 3;
justify-self: center;
}
.static_labels {
justify-self: center;
}<!-- Fund Library Section -->
<div class="fund" id="home">
<div class="fund__container">
<h1>Fund Library</h1>
<div class="row_user">
<div class="label_title">
<label for="fundticker">Fund Ticker</label>
</div>
<div class="textbox">
<input
type="text"
id="fundticker"
name="fundticker"
placeholder="Example: AGTHX"
/>
</div>
<div class="label">
<label for="short-low">Short Term Capital Gain (Low) %</label>
</div>
<div class="textbox">
<input
type="number"
id="short-low"
name="short-low"
placeholder="Enter %..."
/>
</div>
<div class="label">
<label for="short-high">Short Term Capital Gain (High) %</label>
</div>
<div class="textbox">
<input
type="number"
id="short-high"
name="short-high"
placeholder="Enter %..."
/>
</div>
<div class="label">
<label for="long-low">Long Term Capital Gain (Low) %</label>
</div>
<div class="textbox">
<input
type="number"
id="long-low"
name="long-low"
placeholder="Enter %..."
/>
</div>
<div class="label">
<label for="long-high">Long Term Capital Gain (High) %</label>
</div>
<div class="textbox">
<input
type="number"
id="long-high"
name="long-high"
placeholder="Enter %..."
/>
</div>
</div>
<div class="row_button">
<button class="main_btn"><a href="#">Submit Fund</button>
</div>
<div class="row_fund-frame">
<ol class="static_labels">
<li class="static_fund">Fund Name</li>
<li class="static_fund">Fund Ticker</li>
<li class="static_fund">Short Capital Gains %s</li>
<li class="static_fund">Long Capital Gains %s</li>
</ol>
<ol class="dynamic_labels">
<li class="dynamic_fund">DB Fund Name</li>
<li class="dynamic_fund">DB Fund Ticker</li>
<li class="dynamic_fund">DB Short Capital Gains %s</li>
<li class="dynamic_fund">DB Long Capital Gains %s</li>
</ol>
</div>
</div>
</div>更正标记中的错误
正如@connexo在评论中指出的那样，你有一个Anchor标签，位于按钮标签内。更重要的是，您永远不会关闭A标记，因此按钮标记将继续包裹第三列的剩余部分。这是一条令人反感的线路：
<button class="main_btn"><a href="#">Submit Fund</button>
它应该是一个按钮或一个锚，而不是两者都是。