Question

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

有没有办法使用CSS将事物与“结束”而不是“正确”对齐？我在这里专门针对Webkit。

我想做的例子：

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

或

position: absolute;
end: 0px; /* instead of right: 0px */

显然，其中任何一个都不起作用。

我知道可以为rtl设置样式，并使用它来将我的所有right: 0px;更改为left: 0px。我在这里寻找更好的解决方案。

修改

对于某些上下文，页面中的元素遍布整个地方，可以执行各种操作。但我现在专门研究的是一个菜单栏。它左边有一些静态按钮，中间有一个可变的痕迹，右边有一些静态按钮。面包屑应该像文本一样流动（从左到右或从右到左，视情况而定）。

Answer 1

Flexbox的设计不仅仅是您典型的LTR写作方式。在对齐和对齐方面，它具有flex-start和flex-end等语言。您描述相关元素的方式可能没有必要使用它们。

http://codepen.io/cimmanon/pen/bdynv（包含LTR和RTL示例）

<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>

CSS：

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;
}

请注意，使用table / table-cell显示属性可以实现相同的功能，但需要其他元素。

Answer 2

使用一些JavaScript（这里使用jQuery），我们可以检查文本方向并使用类名和一些CSS调整浮点数。

JSFiddle Example

<强> JS：

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

<强> CSS：

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

Answer 3

如果您还没有尝试text-align:right，我建议您从那里开始。文本必须位于p或div标记等块元素中，并且需要设置width: XXXpx，以便左右边缘位于您想要的位置。< / p>

“结束” - CSS中的对齐元素

3 个答案: