inline-block靠右？

Question

想让display:inline-block;的元素靠右怎么办？又不能float：right；设置padding-right和margin-right为0也不行。
父元素ul里面有li和span的，。本来是直接设置span直接靠右的，但是浏览器缩小的话，span就错位了，所以只能把span设成inline-block，但是又想让span靠右

图一 只设置float的，float和inline-block都设置的也是这样

图二 只设置inline-block的

Answer 1

我看到你的问题，发现你有不少知识点的误区。我也入行不深，简单白话一下。
首先看着段代码

// html
<ul>
    <li>
        1111
        <span class="test">2222</span>
    </li>
</ul>
// css
.test{
    /*display: inline-block;*/
    width: 200px;
    height: 100px;
    background-color: red;
    float: right;
}
li{
    overflow: hidden;
}

你说和你采纳的有啥区别，区别在于 display: inline-block是多此一举。到达你想要的关键在于，span的float: right;和li的overflow: hidden;。你该问why？
首先行内元素，如span被设置的float就隐式转换为display: inline-block（非常不严谨）。你出现错位的原因是因为 float bug。你需要包裹元素设置高度，要么就 闭合浮动。

======再话======
display: inline-block它具有行内元素和块元素的特征。text-align: right是可以解决的。但是你需要一个包裹元素。可能这样<p><span>111</span</p>。给p > text-align: right。
当然上面那个代码你这样写，也是可以的。把span变成display: block;

  .test{
      display: block;
      text-align: right;
   }

======继续======
我看你说你用了padding-right:0; margin-right:0。明显你定位问题搞乱了。css 中的position才能用到right来处理位置问题。当然padding，margin也能解决，文档是从左往右。所以padding-left:XXX; margin-left:XXXX，或者margin-right: -XXXX。也能完成类似的需要。但是这个问题不推荐。

解决的方法有很多。你要明白每个方法的影响。

Answer 2

设置父元素text-align: right

Answer 3

感觉像是li里面包裹span，还想让span靠右

// html
<ul>
    <li>
        1111
        <span class="test">2222</span>
    </li>
</ul>
// css
.test{
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: red;
    float: right;
}
li{
    overflow: hidden;
}

Answer 4

你给父级的li写上text-align:right？不可以吗？?