0

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

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

我想做的例子：

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

或者

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

显然，这些都没有真正起作用。

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

编辑：

在某些情况下，页面的元素遍布各处，可以做各种各样的事情。但我现在专门研究的是一个菜单栏。它左侧有一些静态按钮，中间有一个可变面包屑，右侧有一些静态按钮。面包屑应该像通常的文本一样流动（视情况而定，从左到右或从右到左）。

4

4 回答 4

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 显示属性可以实现相同的目的，但它需要额外的元素。

于 2013-11-13T20:24:47.600 回答
0

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

JSFiddle 示例

JS： 

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

CSS： 

.float-end {
    float: right;
}
.float-end.rtl {
    float: left;
}
于 2013-11-13T20:03:57.043 回答
0

我不知道，如果这会回答你的具体问题：

将此 CSS 设置应用于元素的父元素：

position: relative;

现在，您可以设置父项的子项的位置，这将防止元素移出您的框。例如

position: absolute;
bottom: 0;

会将子元素移动到父元素的底部，但不会更远。

于 2021-08-12T13:38:51.680 回答
-1

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

于 2013-11-13T20:06:56.297 回答