Html 右对齐链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6345549/
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
Right align link
提问by www.data-blogger.com
I now got some menu links (in the blue area) on http://beta.ovoweb.net/. Now I want one right aligned link, so the others are left aligned. I tried , but that didn't work. How can I get this working?
我现在在http://beta.ovoweb.net/上获得了一些菜单链接（在蓝色区域）。现在我想要一个右对齐的链接，所以其他的都是左对齐的。我试过了，但这没有用。我怎样才能让它工作？
回答by ngen
Create a child div for the right links. http://jsfiddle.net/A5em8/1/
为正确的链接创建一个子 div。 http://jsfiddle.net/A5em8/1/
HTML:
HTML：
div id="ovoMenu">
<a href="?i=1">Item 1</a>
<a href="?i=2">Item 2</a>
<a href="?i=3">Item 3</a>
<div class="right">
<a href="?i=4">Item 4</a>
</div>
</div>
CSS:
CSS：
.right {
text-align: right;
float: right;
}
#ovoMenu {
margin: 0px;
padding: 0px;
/* Size properties */
padding-top: 5px;
/* Font properties */
color: #FFFFFF;
font-size: 80%;
/* Create a gradient */
background-color: #418CE5;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418CE5', endColorstr='#256EC6');
background: -webkit-gradient(linear, left top, left bottom, from(#418CE5), to(#256EC6));
background: -moz-linear-gradient(top, #418CE5, #256EC6);
/* Links are not allowed on another line */
white-space: nowrap;
}
#ovoMenu a:link, #ovoMenu a:visited, #ovoMenu a:active, #ovoMenu a:hover {
color: #FFFFFF;
/* Corners */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* Size */
margin-left: 12px;
padding-left: 12px;
padding-right: 12px;
/* Display it as a block */
display: inline-block;
/* Height of the link */
height: 30px;
line-height: 30px;
/* No underline */
text-decoration: none;
/* No outline */
outline: 0;
}
#ovoMenu a:hover {
/* Other background */
background-color: #13529E;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#13529E', endColorstr='#084084');
background: -webkit-gradient(linear, left top, left bottom, from(#13529E), to(#084084));
background: -moz-linear-gradient(top, #13529E, #084084);
}
#ovoMenu a.active:link, #ovoMenu a.active:visited, #ovoMenu a.active:active, #ovoMenu a.active:hover {
color: #333333;
font-weight: bold;
background: none;
background-color: #E9E9E9;
}
回答by kei
#ovoMenu, #ovoSubmenu {
text-align: right;
}
#ovoMenu, #ovoSubmenu { text-align: right; }
You mean this?
你是这个意思？
To move the third item to the right:
将第三个项目向右移动：
<a href="?i=3" style="float: right;">Item 3</a>
回答by yoel
回答by Denis Biondic
Set fixed height to ovoSubmenu, set anchors to float:right Is this what you want?
将固定高度设置为 ovoSubmenu，将锚点设置为浮动：这就是你想要的吗？
