如何使YUI-tabs右对齐?

时间:2008-12-15 21:14:59

标签: css yui

对于以下示例:

http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html

我想使标签右对齐并仍保留当前订单。

我确定它很简单 - 只是太接近它才能看到解决方案。

4 个答案:

答案 0 :(得分:1)

我的头顶,怎么样:


<div id="demo" class="yui-navset">
    <ul class="yui-nav" style="text-align:right;">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

答案 1 :(得分:0)

您是否尝试过应用“text-align:right;”到容器div:

<div id="demo" class="yui-navset">

答案 2 :(得分:0)

da5id和Kevin Le说道。

在CSS文件中,添加以下行: ul.yui-nav {text-align:right; }

这是同样的解决方案。

答案 3 :(得分:0)

HTML代码:

<div id="demo" class="yui-navset">
<div class ="tabs-nav" >
    <ul class="yui-nav" >
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>  
</div>          
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

<强> CSS:

div.tabs-nav {height: 45px;} /* important to set div's height so your tabs navigation does not fall in to the tabs content */
ul.yui-nav { float: right;}
ul.yui-nav li { float: left;}