How to align `list-style-image` in a right-aligned list?
Question
I want the list-style-image to appear next to a right-aligned list. How should I do this? Should I move the position or alignment?
3 answers
solution1
-1 2022-07-09 06:22:36
Use flex:
div { display: flex; justify-content: flex-end; } ul { width: max-content; }
<div> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca cola</li> </ul> </div>
solution2
-1 2022-07-09 06:31:52
You can use background-image property to add images as list style image keeping list-style-image: none . For example -
HTML CODE
</head>
<body>
<h1>The list-style-image Property</h1>
<p>The list-style-image property replaces the list-item marker with an image:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
CSS
ul {
list-style: none;
padding: 0;
text-align: right;
display: flex;
align-items: flex-start;
flex-direction: column;
}
li {
width: max-content;
text-align: right;
margin-left: 85%;
}
li:before {
content: url(sqpurple.gif);
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
DEMO
LINKS AND RESOURCES
solution3
-1 2022-07-09 08:09:59
Very similar to the flex approach already out there.
Adding <div> flex-container does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h2>The list-style-image Property</h2>
<!-- Add this flex container here -->
<div class="container">
<p>The ist style-image property specifies an images as the list imtem marker: </p>
<ul>
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</div>
</body>
</html>
ul {
list-style-image: url("./avocado.svg");
}
.container {
display: flex;
}
Demo: codesandbox https://codesandbox.io/s/stackoverflow-css-position-of-list-style-image-562drv?file=/index.html:357-394
Output
solution4
-2 2022-07-09 07:34:54
There's more than one way to achieve this.
Using float
Simply replace text-align: right with float: right :
ul { list-style-image: url('https://www.w3schools.com/csSref/sqpurple.gif'); float: right; }
<ul> <li>Coffee</li> <li>Tea</li> <li>Coca cola</li> </ul>
The only problem with this approach is that elements coming after will need to be cleared with clear: right or clear: both .
div { display: flex; justify-content: right; } ul { list-style-image: url('https://www.w3schools.com/csSref/sqpurple.gif'); }
<div> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca cola</li> </ul> </div>
NOTE: you no longer need text-align: right when using flex.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.