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

回答

相關問題