標籤打破時瀏覽器調整

我已經安裝了以下的jsfiddle例如：http://jsfiddle.net/kzvGz/標籤打破時瀏覽器調整

CSS：

ul#tabs 
{ 
    width: 712px; 
    margin: 0px; 
    padding: 0px; 
} 
ul#tabs > li:first-child 
{ 
    margin-left: 0px !important; 
} 
ul#tabs > li 
{ 
    float: left; 
    list-style-type: none; 
    margin-left: 8px; 
    padding-bottom: 0px !important; 
    border: 1px solid #AAB7D5; 
} 

ul#tabs > li > a 
{ 
    text-decoration: none; 
    background-repeat: no-repeat; 
    outline: 0; 
    color: #515151; 
    display: block; 
    height: 42px; 
    padding-left: 45px; 
    padding-top: 10px; 
    font-weight: bold; 
    font-size: 88%; 
} 

ul#tabs > #tab0 
{ 
    width: 166px; 
} 

ul#tabs > #tab1 
{ 
    width: 227px; 
} 
ul#tabs > #tab2 
{ 
    width: 130px; 
} 
ul#tabs > #tab3 
{ 
    width: 157px; 
}

HTML：

<div> 
    <ul id="tabs"> 
     <li id="tab0"><a href="#">TEST TAB #1</a></li> 
     <li id="tab1"><a href="#">TEST TAB #2</a></li> 
     <li id="tab2"><a href="#">TEST TAB #2</a></li> 
     <li id="tab3"><a href="#">TEST TAB #4</a></li> 
    </ul> 
</div>

當瀏覽器大小（CTRL +加號），它將標籤分爲新行。我如何將它全部保存在一行中？

來源

2013-06-04 firebird

我認爲當你調整（CTRL +加號），你應刷新頁面（f5），你嘗試過嗎？ – 2013-06-04 17:04:15

嘗試使用％年齡而不是固定寬度 – Doug

我沒有看到您描述的突破。你可以截圖嗎？或者你的意思是文本被分解到第二行？ – skzryzg

看來您已經爲您的容器製作了一些文字。

嘗試改變這個設置，從：

ul#tabs > li > a 
{ 
padding-left: 45px; 
}

這樣：

ul#tabs > li > a 
{ 
padding-left: 40px; 
}

因此文本將適合。

來源

2013-06-04 17:10:45 Gimmy

如果你談論的文本分解成兩行，改變

ul#tabs > li > a 
{ 
    ... 
    padding-left: 45px; 
    ... 
}

到

text-align:center;

http://jsfiddle.net/kzvGz/1/

來源

2013-06-04 17:23:05 skzryzg

標籤打破時瀏覽器調整

回答

相關問題