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。这将使您可以绝对控制图像的位置和图像与文本之间的缩进。

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

1 个答案: