可变宽度的li标签

时间：2015-01-08 10:15:02

标签： html css tabs jsfiddle

我如何强制css制作我已填充其部分的li标签。选项卡的数量可以更改为4或5。

我尝试添加以下内容：

.tabs ul li {
    display:table-cell;
}

.tabs ul.static
{
    display:table !important; 
    width:750px !important; 
    table-layout:fixed !important;
}

但它没有奏效。当有第5个标签时，第5个标签转到下面一行。下面的当前jsfiddle就是这样做的。

如果有4个或5个标签，我如何让标签覆盖其容器宽度的100％？

http://jsfiddle.net/L7osd1oc/3/

3 个答案:

答案 0 :(得分：0)

你的ul宽度750px修复。

so you can add li fix width in % and remove ul left panding

答案 1 :(得分：0)

在为下面的元素设置样式时按照表格结构

.tabs{
    display:table;
}
.tabs ul.static{
    display:table-row;
}
.tabs ul li{
    display:table-cell;
}

指定宽度时，在750px的情况下，将其分配给.tabs这是表格元素。 看看这对你有帮助。

答案 2 :(得分：0)

试试这个demo

＆＃13;
＆＃13; 
    .tabs {
        position: relative;
        top: 1px;      
        z-index: 2;
        display: block;
        margin: 0 auto 0 auto;
    }
    .tabs a.static.selected {
        width:100%;
        padding:10px 0 10px 0;
        background: #4096ee; /* Old browsers */
        background: -moz-linear-gradient(top,  #4096ee 0%, #88bff7 55%, #93c9ff 99%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(55%,#88bff7), color-stop(99%,#93c9ff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* IE10+ */
        background: linear-gradient(to bottom,  #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#93c9ff',GradientType=0 ); /* IE6-9 */
    }
    .tabs a.static {
        color:#000000 !important;
        float:none;
        text-decoration:none;
    }
    .tabs ul li {
        list-style: none; 
        margin-left: 1px; 
        color: #000000;
        margin:0px;
        padding:0px;
        text-align:center;
        background: #93c9ff; /* Old browsers */
        background: -moz-linear-gradient(top,  #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93c9ff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        display:inline-block ;
    }
    .tabs a:link {
        color: #000000;
        text-decoration:none;
    }
   
    .tab {       
        padding: 10px 15px;
        position: relative;
        display: inline-block;
        list-style: none; 
        text-align:center;
    }
    .tabs.static.selected:after {
        list-style: none;
        padding: 10px 15px;
        position: relative;
        display: inline-block;
    }

     .tabs ul.static
    {
        padding:0px;
         background: #93c9ff; /* Old browsers */
        background: -moz-linear-gradient(top,  #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
        display:table !important; 
        width:750px !important; 
        table-layout:fixed !important;
    width:100%;
    text-align:center;
    }

    .tab-content {
        width:730px;
        margin: auto;	
        background: #fff;
        min-height: 200px;
        border-radius: 7px;
        padding:10px;
        text-align:center;
    }
    .changeButton {
        padding: 10px;
        margin-left: 25px;
        color: #FFFFFF;
        background-image: url('data:image/png;base64,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') !important;
        background-repeat: repeat-x; 
        border-style:none;
    }

    .in-life-container
    {
        display: block;
        margin: auto;
        width:750px ;
    }
＆＃13; 
<div class="in-life-container"> <a href="#ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=6iNAiGgDBpuUye_ZuQPbwXiF72lVuKy1N2-6JtQmWhRUTLP-_aBCSi-HAD2Zs-eHQCBbOkoJeU_cbrTEvN9ZQUSgy7q8g4vdB9ibfUBW5rM1&amp;t=635418570520000000" width="0" height="0" style="border-width:0px;"></a>
    <div class="tabs" id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1" style="float: left;">
        <ul class="level1 static" tabindex="0" role="menubar" style="position: relative;"><li role="menuitem" class="static" style="position: relative; "><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','4')" tabindex="-1">SIP Details</a></li>
            <li role="menuitem" class="static" style="position: relative;"><a class="level1 tab selected static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','0')" tabindex="-1">Change Address</a>
            </li>
            <li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static highlighted" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','1')" tabindex="-1">Change Ownership</a>
            </li>
            <li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','2')" tabindex="-1">Re-grade Service</a>
            </li>
            <li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','3')" tabindex="-1">Cease Service</a>
            </li>
        </ul>
    </div>
    <div style="clear: left;"></div><a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1_SkipLink"></a>

    <div class="tab-content">To change the address on this account please <a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_LinkButton_CreateTicket_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$LinkButton_CreateTicket','')">create a ticket here.</a>

    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题