Html &引用；完"-CSS中的align元素

我有一个项目，需要正确处理从左到右和从右到左文本。在设计中，一些元素是右对齐的。这意味着对于rtl，它们需要左对齐

有没有一种方法可以使用CSS将事物与“末端”对齐，而不是与“右侧”对齐？我在这里特别针对Webkit

我想做的例子如下：

float: end; /* instead of float: right */

或

显然这两种方法都不起作用

我知道可以为rtl设置样式，并使用它来更改我所有的

权限：0px至
左侧：0px
。我在这里寻找更好的解决方案


编辑：

对于某些上下文，页面上到处都有元素在做各种事情。但我现在特别研究的是一个菜单栏。它左边有一些静态按钮，中间有一个可变的面包屑，右边有一些静态按钮。面包屑应该像文本一样流动（从左到右或从右到左，视情况而定）。
使用一点JavaScript（这里使用jQuery），我们可以检查文本方向，并使用类名和一些CSS调整浮动


JS:

CSS:

如果您还没有尝试过
text align:right
，我建议从这里开始。文本必须位于块元素中，例如
p
或
div
标记，并且需要设置
宽度：XXXpx
，以便左右边缘位于您想要的位置。
Flexbox的设计不仅仅考虑了典型的LTR书写方式。在对齐和对齐方面，它具有类似于
flex start
和
flex end
的语言。按照您描述相关元素的方式，可能没有必要使用它们

（包含LTR和RTL示例）

请注意，使用表格/表格单元格显示属性也可以实现同样的效果，但它需要额外的元素。
您能在这里提供更多的上下文吗？可能有一个解决方案，但它在很大程度上取决于周围的元素。如果您使用经过深思熟虑的语义标记和类，这应该是可以实现的-这样您可以在每页的基础上动态更改与对齐相关的CSS，但仍然具有相同标记的优势。例如，拥有一个
.alignend
类或基于某种更具体的样式覆盖而向左或向右浮动的类（例如，如果您根据页面的类型将
rtl
和
ltr
类动态添加到
主体中）。您可以使用flexbox的justify content属性，它接受flex start和flex end作为选项。flexbox可能是一个不错的选择。请注意，从最近开始，您可以使用
float:inline end
和
text align:end
这样的工具来做您想做的事情。
text align:right
不如
text align:end
这样既适用于rtl，也适用于ltr。
position: absolute;
end: 0px; /* instead of right: 0px */

$(".float-end").each(function(){
    if($(this).css("direction") === "rtl"){
      $(this).addClass("rtl");  
    }
})

.float-end {
    float: right;
}
.float-end.rtl {
    float: left;
}

<nav class="rtl">
  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <img src="http://placekitten.com/100/50" alt="Cat Button" />
  <img src="http://placekitten.com/80/50" alt="Other Cat Button" />
</nav>

nav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* optional */
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
ul li {
  display: inline-block;
}

.rtl {
  direction: rtl;
}