问题描述
|
现在,我在http://beta.ovoweb.net/上获得了一些菜单链接(在蓝色区域中)。现在,我需要一个右对齐的链接,因此其他链接保持左对齐。我试过了,但这没用。我该如何工作?
解决方法
为正确的链接创建一个子div。
http://jsfiddle.net/A5em8/1/
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:
.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,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;
}
, #ovoMenu,#ovoSubmenu {
文字对齐:右;
}
你是这个意思?
要将第三个项目向右移动:
<a href=\"?i=3\" style=\"float: right;\">Item 3</a>
, 我想你可以这样:
http://jsfiddle.net/yuliantoadi/gLpNf/1/
, 将固定高度设置为ovoSubmenu,将锚点设置为float:right
这是你想要的吗?