在同一列表元素中左右对齐文本

Question

我希望有一个列表元素,文本左侧对齐,另一个文本右侧对齐.

我试过这个:https://jsfiddle.net/dso5x75g,但它没有按照我的预期工作,因为"点"在文本上方.

我怎么能正确地做到这一点？

我的代码:

<ul>
    <li>
        <div style="float:left;">Pizza </div>
        <div style="float:right;">€ 20,00</div>
    </li>
 </ul>

Answer 1

您忘记清除默认ul样式.添加以下css:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

在使用时float也要设置布局li:

ul li {
  overflow: hidden;
}

或者使用:after伪元素:

ul li:after {
  display: block;
  content: '';
  clear: both;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  overflow: hidden;
}

<ul>
  <li>
    <div style="float:left;">Pizza </div>
    <div style="float:right;">€ 20,00</div>
  </li>
</ul>

您也可以使用css3 flexbox在两个方向上对齐文本,而不是使用浮点数.您将需要以下css:

ul li {
    justify-content: space-between;
    display: flex;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  justify-content: space-between;
  display: flex;
}

<ul>
  <li>
    <div>Pizza </div>
    <div>€ 20,00</div>
  </li>
</ul>

如果目标是将自定义图像用作项目符号,则可以使用:before伪元素绘制它们:

ul {
  list-style: none;
  padding: 0 20px;
  margin: 0;
}
ul li {
  position: relative;
  overflow: hidden;
  padding-left: 15px;
}

ul li:before {
  background-color: black;
  position: absolute;
  height: 5px;
  content: '';
  width: 5px;
  left: 0;
  top: 5px;
}

<ul>
  <li>
    <div style="float:left;">Pizza </div>
    <div style="float:right;">€ 20,00</div>
  </li>
</ul>

在上面的代码中,你可以改变background-color使用background-image和设置width,并height相应地.这将使您可以绝对控制图像和文本之间的图像和缩进位置.