时间戳

首页 > 解决方案 > ol 有序列表编号未与文本一致显示

html - ol 有序列表编号未与文本一致显示

问题描述

我有一个有序列表，由于某种原因，数字与文本显示不符。我已经尝试了我能想到的一切，尝试了不同的组合并寻找答案。我已经包含了图像和 CSS - 有什么建议吗？

ol有序列表编号问题

ol {
    margin: 0;
    padding: 0;
    width: auto;
}

ol li {
    float: left;
    margin: 0;
    background: #e5e5e5;
    width: 100%;
}

ol li a {
    float: left;
    color: #000;
    text-decoration: none;
    padding: 0px 20px 0 20px;
    height: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

#currentSide a {
   color: #fff;
   background: #05668d;
   width: calc(100% - 40px);
}

ol li a:hover {
    color: #fff;
    background: #05668d;
    width: calc(100% - 40px);
}

.leftInfoBox {
    width: 240px;
    top:0;
    margin: 10px 10px 10px 10px;
    padding-bottom: 20px;
    float: left;
}
<div class="leftInfoBox">
  <ol>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ol>
</div>

标签： htmlcss

解决方案

尝试删除float:left您的lianda元素，它将解决您的问题。

ol {
    margin: 0;
    padding: 0;
    width: auto;
}

ol li {
    /* float: left; */
    margin: 0;
    background: #e5e5e5;
    width: 100%;
}

ol li a {
    /* float: left; */
    color: #000;
    text-decoration: none;
    padding: 0px 20px 0 20px;
    height: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

#currentSide a {
   color: #fff;
   background: #05668d;
   width: calc(100% - 40px);
}

ol li a:hover {
    color: #fff;
    background: #05668d;
  width: calc(100% - 40px);
}

.leftInfoBox {
  width: 240px;
  top:0;
  margin: 10px 10px 10px 10px;
  padding-bottom: 20px;
  float: left;
}
<div class="leftInfoBox">
  <ol>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ol>
</div>

推荐阅读