Question

我在网站的页脚上遇到了麻烦。没有出现第一列子弹，但第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 &amp; 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;
}

希望有人可以提供帮助。谢谢！

Answer 1

如果没有额外的CSS，很难发表评论，但我怀疑，根据你正在使用的类，包装div被浮动。

在这种情况下，第一颗子弹将位于容器外部，因此可能不可见。

您可以使用li

让子弹在<{1}}内显示为

list-style-position: inside

* {
  margin: 0;
  padding: 0;
}
.row {
  overflow: hidden;
}
.col {
  float: left;
}
ul,
li {
  list-style-position: inside
}

子弹的第一列没有出现在页脚中

1 个答案: