html - 项目符号的第一列未出现在页脚中

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 是浮动的。

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

您可以使用使项目符号出现 在里面lilist-style-position: inside

* {
  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 &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>