对上<a href="http://beta.ovoweb.net/" rel="noreferrer">http://beta.ovoweb.net/</a>对齐链接

Question

我现在得到了一些菜单链接（蓝色区域）。现在我想要一个右对齐的链接，所以其他人左对齐。我试过了，但没有奏效。我怎样才能得到这个工作？

Answer 1

创建正确的链接子格。 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, 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; 
} 

Answer 2

设置固定高度ovoSubmenu，设置锚浮动：权 这是你想要的吗？

Answer 3

#ovoMenu，#ovoSubmenu { text-align：right; }

你说这个？

到了第三项移动到右边：

<a href="?i=3" style="float: right;">Item 3</a> 

Answer 4

我想你可以这样来做：

http://jsfiddle.net/yuliantoadi/gLpNf/1/