css将项目符号右对齐并保持文本左对齐答案

【问题标题】：css align bullet right and keep text left alignedcss将项目符号右对齐并保持文本左对齐
【发布时间】：2018-08-15 07:48:00
【问题描述】：

我有这段代码在边框中显示文本和箭头图标。如何保持文本左对齐并使箭头右对齐，使其位于边框内的末尾？

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
p{
    border:1px solid #000;
}

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<p>Right arrow: <i class="right"></i></p>

</body>
</html>

【问题讨论】：

标签： html css border css-shapes

【解决方案1】：

您可以在 .right 类上使用 float:right; 将箭头一直指向右侧。然后我只是添加了margin-top:5px; 和margin-right:5px; 来很好地定位它。

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  float:right;
  margin-top:5px;
  margin-right:5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
p{
  border:1px solid #000;
}

<!DOCTYPE html>
<html>
<body>
    <p>Right arrow: <i class="right"></i></p>
</body>
</html>

【讨论】：

谢谢。我最终使用了 position: absolute;右：0；而不是浮动。
别担心！快乐编码:)

【解决方案2】：

如果您只想将箭头作为视觉元素，最好使用:after 伪元素，而不是在 HTML 中引入非语义元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style>
p {
    border: 1px solid #000;
    position: relative;
}
p:after {
    content: ">";
    position: absolute;
    right: 0;
}
</style>
</head>
<body>
<p>Right arrow: </p>
</body>
</html>

您可以为箭头找到一个不错的 Unicode 字符。 content: "\25b6"; 是一个右箭头，但不是特别令人兴奋的。 unicode arrows。如果您的页面以 utf-8 格式提供，您只需复制并粘贴该符号即可。

【讨论】：

【解决方案3】：

此外，您可以将position: relative 和right: 0; 组合使用，这将使箭头对齐最右侧：

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.right-container {
    position: relative;
}
.right {
    position: absolute;
    right: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
p{
    border:1px solid #000;

}

<p class="right-container">Right arrow: <i class="right"></i></p>

这可能会让您更好地控制箭头的位置，但同样可以通过使用上述技术操作边距/填充来实现。

【讨论】：

我想你的意思是 position absolute 放在箭头上，把 position: relative 放在它的容器上。仅仅放置 position: relative 和 right: 0 根本不会将元素 relative 移动到其原始位置。
谢谢我已经编辑了我的答案。其他解决方案是更好的选择，但我想我会留下答案以提供一些其他选择。