Question

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

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>

Answer 1

您可以在float:right;课程中使用.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>

Answer 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格式提供，则只需复制并粘贴该符号即可。

Answer 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>

这可能会让您稍微更好地控制箭头的位置，尽管使用上面提到的技术操纵边距/填充也可以实现相同的效果。

css对齐子弹并保持文本左对齐

3 个答案: