html - 列表样式对齐错误

标签 html css

enter image description here

出于某种原因,列表的第一个元素往往会向右浮动。所有元素符号都应位于开头,所有文本的左侧也应如此。

.bullet-wrap {
  content: "";
  display: table;
  width: 100%;
  float: left;
}
.five {
  padding-bottom: 1%;
}
.bullet-wrap {
  content: "";
  display: table;
  width: 100%;
  float: left;
}
<div class="bullet-wrap">
  <div class="bullet-point">
    <span>1</span>Reduce Carbon Footprint
  </div>
  <ul class="bullet-list">
    <li class="five">Using a minimum of 10% recycled pre-consumer cellular PVC scrap By:</li>
    <li class="five">Harvesting heat from equipment to heat plant and office;</li>
    <li class="five">Combining customer orders to maximize shipments.</li>

  </ul>
</div>

最佳答案

您的 .bullet-wrap 向左浮动,这会将列表中的第一项带到顶部。

尝试在 .bullet-list 上放置一个 clear: both; 规则。

为了使元素符号对齐,您可以尝试使用 list-style-position: inside; 作为 li 的规则。

关于html - 列表样式对齐错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37843829/

相关文章:

javascript - 无法读取未定义的属性 'ui'

python - 获取按钮名称作为输入

html - 另一个 div 的 div 中的 margin 属性

css - 如何使用 Watir 在 div.style 标签中定位文本?

html - 我如何向包装器内的 div(具有 id)添加背景颜色?

html - 让 <aside> 与 mainSection 水平对齐

java - 在 JavaFX 中添加按钮后工具栏的大小不正确

javascript - 通过 jQuery 查找 <li>

html - 通过 href 相互链接本地文件

CSS 过渡语法