将锚对齐到右侧

时间:2013-02-21 11:19:07

标签: html css

考虑以下事项:

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

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

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

7 个答案:

答案 0 :(得分:9)

这样做:

  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/

答案 1 :(得分:7)

你需要单独的容器。

<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 example

答案 2 :(得分:6)

试试这个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%;
}

答案 3 :(得分:2)

也许你可以做这样的事情:<a>a</a><a class="right">b</a>

和css是这样的:a.right { position: absolute; right: 0; }

答案 4 :(得分:0)

您可以尝试以下代码:

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


  <a>a</a><a style="text-align:right">b</a>   

答案 5 :(得分:0)

classid分配给&#39; b&#39;包含锚并给它margin-left:100%

例如:

.second{margin-left:100%;}

a:nth-child(2){margin-left:100%;}

你也可以这样做:

<强> CSS

a:nth-child(1){display:inline-block;width:50%;text-align:left;float:left;}
a:nth-child(2), .second{display:inline-block;width:50%;text-align:right;}

<强> Working Fiddle

答案 6 :(得分:0)

conveyor_kinectcolor = conveyor_belt.getDevice("kinect color") File "/usr/local/webots/lib/controller/python27/controller.py", line 1756, in <lambda> __getattr__ = lambda self, name: _swig_getattr(self, Node, name) File "/usr/local/webots/lib/controller/python27/controller.py", line 96, in _swig_getattr raise AttributeError("'%s' object has no attribute '%s'" % (class_type.__name__, name)) AttributeError: 'Node' object has no attribute 'getDevice' mydiv<div class=" ">我的链接<a class =" "> test </a>

.</div>{ 文本对齐:左; }

您必须为 'a' 标签输入您的样式 mydiv 给 'div'