如何在右对齐列表中对齐 `list-style-image`？
[英]How to align `list-style-image` in a right-aligned list?
问题描述
I want the list-style-image to appear next to a right-aligned list.
我希望list-style-image出现在右对齐列表的旁边。 How should I do this?我应该怎么做？ Should I move the position or alignment?我应该移动 position 还是 alignment？
3 个解决方案
解决方案1
-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>
解决方案2
-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 .您可以使用background-image属性将图像添加为列表样式图像保持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 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链接和资源
解决方案3
-1 2022-07-09 08:09:59
Very similar to the flex approach already out there.非常类似于已经存在的 flex 方法。
Adding <div> flex-container does the job.添加<div> flex-container 完成这项工作。
<!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演示：codesandbox https://codesandbox.io/s/stackoverflow-css-position-of-list-style-image-562drv?file=/index.html:357-394
Output输出
解决方案4
-2 2022-07-09 07:34:54
There's more than one way to achieve this.实现这一目标的方法不止一种。
Using float使用float
Simply replace text-align: right with float: right :只需将text-align: right替换为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 .这种方法的唯一问题是后面的元素需要用clear: right或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.注意：使用 flex 时不再需要text-align: right 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.