爲RTL語言對齊元素

Question

我需要在垂直時間線下面顯示新聞示例非常適合我在尋找這個我可以進一步修改我的需求，但我需要英語&阿拉伯語。英文版本：https://codepen.io/jplhomer/pen/lgfus

改良版的阿拉伯語（RTL）https://codepen.io/anon/pen/LboryL

@import "compass/css3"; 

$gray: #dddddd; 

h1, h2, h3 { 
    font-weight: 300; 
} 

.container { 
    padding: 1em; 
} 

.timeline { 
    position: relative; 
    overflow: auto; 


    &:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 5px; 
    background: $gray; 
    right: 0; 
    } 

    h2 { 
    background: $gray; 
    max-width: 6em; 
    margin: 0 auto 1em; 
    padding: 0.5em; 
    text-align: center; 
    position: relative; 
    clear: both; 
    } 

    ul { 
    list-style: none; 
    padding: 0 1em 0 0 ; 
    z-index: 1; 
    } 

    li { 
    background: $gray; 
    padding: 1em; 
    margin-bottom: 1em; 
    position: relative; 
    direction:rtl; 
    text-align:right; 

    &:before { 
     content: ''; 
     width: 0; 
     height: 0; 
     border-top: 1em solid $gray; 
     border-right: 1em solid transparent; 
     position: absolute; 
     right: -1em; 
     top: 0; 
    } 
    } 

    h3 { 
    margin-top: 0; 
    } 

    time { 
    font-style: italic; 
    } 
} 

@media screen and (min-width: 40em) { 
    .container { 
    max-width: 1000px; 
    margin: 0 auto; 
    } 

    .timeline { 
    &:before { 
     left: 50%; 

    } 

    ul { 
     padding-left: 20px; 
     max-width: 700px; 
     margin: 0 auto; 

    } 

    li { 
     width: 42%; 
    } 

    li:nth-child(even) { 
     float: left; 
     margin-top: 2em; 
    } 

    li:nth-child(odd) { 
     float: right; 

     &:before { 
     border-top: 1em solid $gray; 
     border-right: 1em solid transparent; 
     left: auto; 
     right: -1em; 
     } 
    } 

    li:nth-of-type(2n+1) { 
     clear: both; 
    } 
    } 
} 

我已經修改CSS與RTL語言，但指針的第一個元素ul工作是否顯示在右邊，我試圖箭頭在左邊顯示打破箭頭。我嘗試一些事情，但一個或其他的事情中斷在此

Answer 1

我固定它通過更改

li:nth-child(odd) { 
    float: right; 

    &:before { 
    border-top: 1em solid $gray; 
    border-left: 1em solid transparent; 
    right: auto; 
    left: -1em; 
    } 
} 

工作液：https://codepen.io/anon/pen/LboryL