对齐锚向右

考虑以下几点：对齐锚向右

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

我怎么能对准第二锚（二）正确的？

PS：浮动是在这种情况下的滥用，它不适合本作，它会导致一些问题，所以我需要其他更合理的解决方案。

来源

2013-02-21 user2080105

是不是有包装元素？为什么浮动对你来说不合理？ – 2013-02-21 11:21:04

'text-align：right'？ – Morpheus 2013-02-21 11:21:48

因为我有一个div下面，如果我使用浮动，第一锚和div之间的余量和第二锚和div之间的余量不一样+一见钟情听起来不好“浮动” – user2080105 2013-02-21 11:25:42

你会需要单独的容器。

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

来源

2013-02-21 11:25:38

它使事情复杂化，如果我们有4个锚并且我想要对齐最后两个，所以我需要一个通用的解决方案 – user2080105 2013-02-21 11:28:55

在这种情况下，您需要将右对齐的两个锚定在右对齐的范围内。 ' a b c'。我在我的文章中添加了一个JSFiddle示例。 – 2013-02-21 11:31:36

这是最合理的解决方案，非常感谢:) – user2080105 2013-02-21 11:35:30

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

和CSS这样的：a.right { position: absolute; right: 0; }

来源

2013-02-21 11:22:01 moritzw

如果没有包裹元素，你认为第二个链接出现在哪里？ :) – Morpheus 2013-02-21 11:23:00

这是不好的，因为想象我有3个锚点，我想对齐最后两个，你的解决方案会在这种情况下复杂的东西 – user2080105 2013-02-21 11:24:11

好吧，比不使用它:) – moritzw 2013-02-21 11:25:20

你可以试试下面的代码：

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


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

来源

2013-02-21 11:22:59

abuot文本对齐的权利问题，它不起作用，因为它将文本锚定在锚中但我想对齐锚本身 – user2080105 2013-02-21 11:29:26

试试这个CSS，

使用CSS3第n个孩子（）

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

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

注：第n个孩子是一个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%; 
}

来源

2013-02-21 11:28:26

你正在使b是在下一个lign，这将是如此复杂，如果我们需要对齐超过1个元素 – user2080105 2013-02-21 11:31:42

@ user2080105检查此，http：// jsbin.com/opexim/6/edit – 2013-02-21 11:35:33

分配class或id到 'B' 含有锚并给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

来源

2013-02-21 11:38:42

只是这样做：

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/

来源

2015-01-02 09:54:10 umer

回答

相关问题