html - 与有序列表对齐

Question

我这里有 html ...

<!-- Contact -->
    <section id="volunteer" class="row" data-scroll-factor="0.7">
      <div class="col-md-10 col-md-offset-1">
        <div class="icon"><i class="fa fa-info"></i></div>
        <h1>Volunteer Projects</h1>
        <div class="section-content">
          <p>
          </p>
           <ul class="basiclist">
                       <li>Homeless Shelters and short term respite</li>
                       <li>Addiction & Rehabiliation support</li>
                       <li>Domestic Violence/abuse</li>
                       <li>Asylum Seekers and Refugees</li>
                     </ul>

                     <br><p> If .</p>



        </div>
      </div><!-- End of .col-md-10 -->
    </section><!-- End of Contact-->

我的 ul 总是向左对齐...所以我尝试了这个 css 但它不起作用。

// Section: volunteer
&#volunteer{

    .basiclist{


            text-align:left;
        }

真的就是这样，虽然我怀疑在这种情况下这是我自己的愚蠢，但不确定有什么愚蠢的 css 问题。请帮忙。

Answer 1

如果你给 div class=section-content 一个 id say: myListContainer 然后添加这个 CSS 规则，它可能会覆盖 Bootstrap CSS:

 #myListContainer { text-align: left; }

text-align 并不意味着直接在您希望对齐的元素上使用。它旨在应用于 block 级元素，然后该元素中的内容会受到影响(继承)。