Html 将锚点向右对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15000913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:46:26  来源:igfitidea点击:

Align an anchor to the right

htmlcss

提问by user2080105

consider the following :

考虑以下 :

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

How Can I align the second anchor (b) to the right ?

如何将第二个锚点 (b) 向右对齐?

PS :float is an abuse in this situation, it's not made for this and it causes some problems, so I need other more reasonable solution.

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

回答by umer

Just do this:

只需这样做:

  style="float:right"

like:

喜欢:

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

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

回答by James Donnelly

You'd need separate containers.

你需要单独的容器。

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

JSFiddle 示例

回答by Muthu Kumaran

Try this CSS,

试试这个 CSS,

Using CSS3 nth-child()

使用 CSS3 nth-child()

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

Demo: http://jsbin.com/opexim/3/edit

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

Note: nth-child is a CSS3 and won't work on older browsers like IE6, 7 and 8

注意:nth-​​child 是一个 CSS3,不能在 IE6、7 和 8 等旧浏览器上工作

Support for old browsers

支持旧浏览器

Set classto second <a>anchor element and apply the CSS.

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

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


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

回答by moritzw

maybe you can make something like this: <a>a</a><a class="right">b</a>

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

and css like this: a.right { position: absolute; right: 0; }

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

回答by moritzw

You may try the below code :

您可以尝试以下代码:

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


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

回答by Mr_Green

Assign a classor idto the 'b' containing anchor and give margin-left:100%to it.

将 a classor分配给id包含“b”的锚点并给margin-left:100%它。

For example:

例如:

.second{margin-left:100%;}

or else

要不然

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

or else

要不然

you can also do like mentioned below:

你也可以像下面提到的那样做:

css

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

工作小提琴