css align bullet right and keep text left aligned

我有这个代码在边框中显示文本和箭头图标。如何保持文本左对齐并使箭头右对齐，以便它位于边界内部？css align bullet right and keep text left aligned

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>

来源

2017-07-27 Dan Green

您可以使用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>

来源

2017-07-27 20:08:03

谢谢。我结束了使用position：absolute;正确：0;而不是浮动。 –

不用担心！快乐编码:) –

此外，还可以使用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>

这将可能给你的位置稍微好一点的控制的箭头，尽管用上面提到的技术操纵边距/填充可以实现同样的效果。

来源

2017-07-27 20:10:40 SimplyComplexable

我认为你的意思是'绝对位置'在箭头上，把'position：relative'放在它的容器上。只要放置'position：relative'和'right：0'就不会将元素* relative *移动到其原始位置。 – Don

谢谢我编辑了我的答案。其他解决方案是一个更好的选择，但我想我会离开答案提供一些其他选项。 – SimplyComplexable

如果你只是想要一个箭头作为视觉元素，最好使用: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提供，您可以复制并粘贴该符号。

来源

2017-07-27 20:20:58

css align bullet right and keep text left aligned

回答

相关问题