我正在与一些链接和页脚的div工作,我有一些问题。
由于某种原因,两个部分之间都有白色的间隙。我使用了inspect,但它似乎是一个隐藏的边界块?我添加了边距-bottom/top: 0;,但它不起作用。有没有办法去掉它,这样从链接部分到页脚可以无缝过渡?
此外,链接部分中的问题词链接应该在第二列中(正如您所看到的,我对它进行了编码),但它出现在第一列中,我不确定为什么。
非常感谢你的帮助!
.footerwrapper {
padding: 10px 20px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 120px;
background-color: #333;
}
.contentcontainer {
margin: 0 260px 0 260px;
max-width: 960px;
height: 440px;
width: 960px;
display: block;
box-sizing: border-box;
}
.footitle p {
text-align: left;
color: #EEEEEE;
font-size: 28px;
}
.twocols {
column-count: 2;
column-gap: 5px;
padding-bottom: 20px;
}
.twocolsblock1 .twocolsblock2 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-bottom: 0px;
width: auto;
align-items: center;
}
.lessonlinktitle.footer {
color: #E5E5E5;
font-size: 18px;
line-height: 25px;
cursor: pointer;
word-spacing: 0px;
display: block;
outline: rbg(255, 0, 0) dashed 1px;
width: 306px;
text-decoration: none solid rgba(203, 203, 193, 0.77) !important;
}
.lessonlinkblurb.footer {
color: #CBCBC1;
font-size: 14px;
line-height: 21px;
cursor: pointer;
word-spacing: 0px;
display: block;
outline: rbg(255, 0, 0) dashed 1px;
width: 306px;
text-decoration: none solid rgba(203, 203, 193, 0.65) !important;
}
/********* Footer ************/
.footerwrapper.bottom {
background-color: #111;
position: relative;
font-size: 13px;
margin: 0;
min-height: 100%;
padding: 0;
background: #1f1c1f;
color: #FFFFFF;
text-align: center;
height: 30px;
font-family: 'Nunito Sans', sans-serif;
}<div class="footerwrapper">
<div class="contentcontainer">
<div class="footitle">
<p id="learn">Learn Chokwe</p>
</div>
<div class="twocols">
<div class="twocolsblock1">
<a href="/greetings.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Greetings & Introductions</div>
<div class="lessonlinkblurb footer">How to greet and introduce yourself in Chokwe</div>
</a>
<br>
<a href="/family.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Family</div>
<div class="lessonlinkblurb footer">How can you describe your family in Chokwe?</div>
</a>
<br>
<a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Numbers</div>
<div class="lessonlinkblurb footer">How to count in Cokwe</div>
</a>
<br>
<a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Days of the Week</div>
<div class="lessonlinkblurb footer">How to say the days of the week in Chokwe</div>
</a>
<br>
<a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Months of the year</div>
<div class="lessonlinkblurb footer">How to say the months of the year in Chokwe</div>
</a>
<br>
<a href="/timenumbers.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Time and time concepts</div>
<div class="lessonlinkblurb footer">How say early, late, always and other concepts in Chokwe</div>
</a>
</div>
<div class="twocolsblock2">
<a href="/learn-italian/question-words" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Question words</div>
<div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How to ask questions in Chokwe</div>
</a>
<br>
<a href="/travelling.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Travelling</div>
<div class="lessonlinkblurb footer">Need to get to travel somewhere? Learn how to do it in Chokwe</div>
</a>
<br>
<a href="/shopping.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Shopping</div>
<div class="lessonlinkblurb footer">Let's go shopping and see how to buy items in Chokwe</div>
</a>
<br>
<a href="/verbs.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Important Verbs</div>
<div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. How to use verbs in Chowke</div>
</a>
<br>
<a href="/proverbs" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Proverbs</div>
<div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
</a>
<br>
<a href="/phrases.html" class="lessonlink w-inline-block" style="text-decoration:none">
<div class="lessonlinktitle footer">Phrases</div>
<div class="lessonlinkblurb footer">Extra phrases in Chokwe that may be handy</div>
</a>
</div>
</div>
</div>
</div>
<div class="footerwrapper bottom">
<p> ©2020 | Chokwe Language </p>
</div>
</body>
发布于 2021-01-24 04:41:51
因为你用了P标签。并在默认情况下为其设置边距。移除它将解决差距问题。
p {
margin: 0;
}

对于第二个问题,您可以使用:
.twocols {
display: flex;
/* column-count: 2; */
/* column-gap: 5px; */
/* padding-bottom: 20px; */
}

https://stackoverflow.com/questions/65863866
复制相似问题