第一列项目符号未出现在页脚中
First column of Bullets not appearing in footer
我在使用网站页脚时遇到问题。第一列项目符号未出现,但第 2、3 和 4 列显示正常。我试过使用填充等等,但第一列项目符号总是不显示。
我的 Html 代码是
<div class="row">
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Our Team</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">FAQ</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Careers</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Terms & Conditions</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Facebook</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Twitter</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Instagram</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Blog</span>
</li>
</ul>
</div>
</div>
<div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Login</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Register</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Help</span>
</li>
</ul>
</div>
</div>
我的css代码是
.footer-bottom {
border-top: 1px solid #000;
text-align: center;
background: #0a0a0a;
height: 345px;
padding-left: 50px;
}
希望有人能提供帮助。谢谢!
没有额外的 CSS,很难评论,但我 怀疑 ,基于 类 你正在使用的包装 div 是浮动的。
在这种情况下,第一批子弹将在容器外,因此可能不可见。
您可以使用 list-style-position: inside
使项目符号出现在 中 li
中
* {
margin: 0;
padding: 0;
}
.row {
overflow: hidden;
}
.col {
float: left;
}
ul,
li {
list-style-position: inside
}
<div class="row">
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Our Team</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">FAQ</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Careers</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Terms & Conditions</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Facebook</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Twitter</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Instagram</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Blog</span>
</li>
</ul>
</div>
</div>
<div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Login</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Register</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Help</span>
</li>
</ul>
</div>
</div>
我在使用网站页脚时遇到问题。第一列项目符号未出现,但第 2、3 和 4 列显示正常。我试过使用填充等等,但第一列项目符号总是不显示。
我的 Html 代码是
<div class="row">
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Our Team</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">FAQ</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Careers</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Terms & Conditions</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Facebook</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Twitter</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Instagram</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Blog</span>
</li>
</ul>
</div>
</div>
<div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Login</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Register</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Help</span>
</li>
</ul>
</div>
</div>
我的css代码是
.footer-bottom {
border-top: 1px solid #000;
text-align: center;
background: #0a0a0a;
height: 345px;
padding-left: 50px;
}
希望有人能提供帮助。谢谢!
没有额外的 CSS,很难评论,但我 怀疑 ,基于 类 你正在使用的包装 div 是浮动的。
在这种情况下,第一批子弹将在容器外,因此可能不可见。
您可以使用 list-style-position: inside
li
中
* {
margin: 0;
padding: 0;
}
.row {
overflow: hidden;
}
.col {
float: left;
}
ul,
li {
list-style-position: inside
}
<div class="row">
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Our Team</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">FAQ</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Careers</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Terms & Conditions</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
</li>
</ul>
</div>
</div>
<div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Facebook</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Twitter</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Instagram</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Blog</span>
</li>
</ul>
</div>
</div>
<div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
<div>
<ul class="columns" data-columns="2">
<li style="text-align: left;"><span style="color: #969696;">Login</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Register</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
</li>
<li style="text-align: left;"><span style="color: #969696;">Help</span>
</li>
</ul>
</div>
</div>