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>