将项目符号右对齐而不是左对齐

Question

将项目符号右对齐而不是左对齐

htmlcss

14

我有一些右对齐的项目符号，希望它们出现在右边而不是左边。

我使用项目符号因为我将用箭头代替符号链接到 URL 并将其用于导航。

我应该怎么做？

以下是我在页眉中用于导航的代码：

.header right {
padding-top: 8px;
float: right;
text-align: right;
}
.header right ul
{
margin:0;
padding:0;
}
.header right a
{
display:block;
color: black;
text-decoration: none;
}

和HTML

<right>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
</ul>
</right>

如果我使用rtl（从右到左）方向，项目符号会消失。

- Anthony

请发布 HTML 代码，这样我们就可以创建一个 Fiddle。 - Sajad Karuthedath

@Anthony：“如果我使用rtl方向，项目符号会消失”？不会的。你可能有其他CSS导致了项目符号消失。 - Exlord

5个回答

13

尝试一下演示 标记：

<div dir="rtl">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Jewel Thieves</a></li>
<li><a href="#contact">Community</a></li>
</ul>
</div>

- Sajad Karuthedath

div容器和CSS声明块（在JSFiddle中）是不必要的。 - Miquel Al. Vicens

13

您可以使用CSS属性direction:rtl; 或者HTML属性dir="rtl"

- Exlord

@Anthony 这个完美地运行了。没有任何问题，你标记一个不存在的HTML标签<right>的答案是荒谬的。 - Amarnath Balasubramanian

1

不够健壮。例如，检查如果有 <li><a href="...">foo?</a></li> 会发生什么。 - Jukka K. Korpela

@JukkaK.Korpela 那应该怎么做才能避免这种情况呢？ - Amarnath Balasubramanian

1

@JukkaK.Korpela 什么是不健壮的？请详细说明。 - mplungjan

1

@AmarnathBalasubramanian <li><a href="...">foo?‎</a></li> 将会起作用。 - mplungjan

@JukkaK.Korpela ul li *{direction:ltr}@JukkaK.Korpela ul li *{方向:从左到右} - Exlord

2

 <!DOCTYPE html>
    <html>
    <body>

<ul dir="rtl">
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
</ul>

    </body>
    </html>

它将对您有帮助

- Dipak

2

适用于我

实时演示

ul {
 direction:rtl;
 list-style-image:url(http://australianetwork.com/img/icon_arrow_left_black.png);   
}

使用简单而有效的方法-请注意右括号和问号上的实体‎

<ul>
  <li><a href="">Home (on the range)&#x200E; </a></li>
  <li><a href="">Jewel Thieves</a></li>
  <li><a href="">Community</a></li>
  <li><a href="...">foo?&#x200E;</a></li>
</ul>

- mplungjan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

将列表元素设置为direction: rtl会将项目符号放在右侧，但这种方式很容易出问题，因为该设置还会影响整体书写方向。这意味着例如“foo（bar）”将显示为“(foo（bar”，按照Unicode双向算法。

为了解决这个问题，您需要在列表项内部将方向设置为从左到右。在这种特殊情况下，每个li只包含一个a元素，没有其他内容。那么可以使用以下方法：

<style>
ul { direction: rtl; }
ul li a { direction: ltr; unicode-bidi: embed; }
</style>

然而，这可能太棘手了。最好将列表标记（圆点、箭头等）作为字符或图像添加到列表项中，可能使用CSS，并省略浏览器生成的列表标记。细节取决于原始问题的具体情况和上下文。