Question

文本偏离中心，并且项目符号与文本重叠。顶部li位于页面中间。第二个li向左对齐。第三李在右边对齐。并且所有人的子弹都与文本重叠。

    <div class="container counter-container">
<ol>
    <div class="media-container-row">
        <div class="mbr-text counter-container col-12-md mbr-fonts-style display-4">
           <div class="row">
                <div class="col-md-12">

                        <li><span class="a"><strong>COMMUNITY</strong> - Bringing schools and communities together for a common cause.</span></li>

                </div>
            </div>
        </div>
    </div>
    <div class="media-container-row">   
        <div class="mbr-text counter-container col-md-12 mbr-fonts-style display-4">
            <div class="row">
                <div class="col-md-12">

                        <span class="b"><li><strong>EASY AND SIMPLE</strong> - Coaches, Create a Schedule. &nbsp;Fans, sponsor your team.</li></span>

                </div>
            </div>
        </div>
    </div>

    <div class="media-container-row">
        <div class=" counter-container col-12-md mbr-fonts-style display-4">
            <div class="row">
                <div class="col-md-12">

                        <span class="c"><li><strong><br><center>FUN</strong> - Encourages fans to show up and players to try harder!</li></span>

                </ol>
                </div>
            </div>
        </div>  
    </div>
</div>

Answer 1

尝试将您的所有fetchConnection标签放在第二行和第三行的跨度之外。

此外，删除第三个列表项之前的<li>标签。

如果这还不能完全解决问题，您可以张贴随附的CSS吗？特别是a，b和c类？

Answer 2

您正在使用引导程序，因此只需使用引导程序类来设置您的列表：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

对齐项目符号和居中文字

2 个答案: