将锚对齐到右侧

Question

考虑以下 :

<a>a</a><a>b</a>

如何将第二个锚(b)对齐到右边？

PS:浮动在这种情况下是滥用,它不是为此而造成的,它会导致一些问题,所以我需要其他更合理的解决方案.

Answer 1

这样做:

  style="float:right"

喜欢:

<div>
   <a href="#Equipment" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Equipment</a>
         <a href="#Model" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini" style="float:right">Model</a>  
</div>

http://jsfiddle.net/umerqureshi/0jx7kf1L/

Answer 2

你需要单独的容器.

<p>
    <span>
        <a>Left</a>
    </span>
    <span class="align-right">
        <a>Right</a>
    </span>
</p>

p {font-size:0; /* Fixes inline block spacing */  }
span { width:50%; display:inline-block; }
span.align-right { text-align:right; }

span a { font-size:16px; }

JSFiddle示例.

Answer 3

试试这个CSS,

使用CSS3 nth-child()

a:nth-child(2) {
   display: inline-block;
   text-align: right;
   width: 100%;
}

演示:http://jsbin.com/opexim/3/edit

注意:nth-​​child是一个CSS3,不适用于IE6,7和8等旧版浏览器

支持旧浏览器

设置class为第二个<a>锚元素并应用CSS.

<a>a</a><a class="right">b</a>


a.right {
   display: inline-block;
   text-align: right;
   width: 100%;
}