【问题标题】:Align hebrew letters in ordered list to the right将有序列表中的希伯来字母向右对齐
【发布时间】:2017-05-07 06:33:56
【问题描述】:

我正在设计包含有序列表的文章。 我在将列表的字母与希伯来语接受的右侧对齐时遇到问题(即,这就是排序列表在 Microsoft Office Word 中的格式)。 我尝试过使用附加到 sn-p 的 Css。

ol {
  list-style-type: hebrew;
  direction: rtl;
  text-align: right;
}
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ol>

错误:

期望:

编辑:

我带来了以下“解决方案”。随意提供一些不那么脆弱的东西。

ol {
  list-style-type: hebrew;
  direction: rtl;
  text-align: right;
}

li {
  counter-increment: num;
  display: flex;
}

li:before {
  content: '.' counter(num, hebrew);
  direction: ltr;
  unicode-bidi: bidi-override;
  min-width: 23px;
}
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ol>

EDIT2:

另一种方法是这样的:

ol {
  list-style-type: hebrew;
  list-style-position: inside;
  direction: rtl;
  text-align: right;
}
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ol>

不幸的是,它看起来有点丑。 希望有一种方法可以将这种态度的笔直与以前的外观结合起来。

【问题讨论】:

    标签: html css right-to-left


    【解决方案1】:

    我想你可以尝试不同的方式。看看下面的代码是否满足你的要求。

    ol {
        direction: rtl;
        text-align: right;
        counter-reset: num;
        float: left;
    }
    li {
        list-style-type: none;
        counter-increment: num;
        padding-bottom: 4px;
        text-align: right;
        position: relative;
    }
    li:before {
        content: '.' counter(num, hebrew);
        padding-left: 10px;
        text-align: right;
        position: absolute;
        width: 28px;
        right: -35px;
        direction: ltr;
    }
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
    </ol>

    【讨论】:

    • 外观很棒。但是,大于等于 11 的数字会以相反的顺序排列:'אי' 而不是 'יא' 等...
    • 好吧。这就是它的工作方式,我认为它不能按照你对柜台的要求来完成。我猜 אי 是正确的,而不是 יא。
    • 感谢您的努力。不,这是不正确的。应该和截图一样。
    猜你喜欢
    • 2021-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多