1

cssのタブメニューです。次のリンクで画像を確認できるように、1つのタブに長い名前を書いてみました。

これは元の1つです： http://innovativeartz.com/problems/orignal.png

cssで変更したとき ここに画像の説明を入力してください

.tabs {width:100%;overflow:auto;}
.tabs li {float:left;padding-right:1px;}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/PIE.htc);position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/PIE.htc);position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}

これはHTMLです

 <ul class="tabs">
        <li><a href="#" id="changeText">inclusive Class</a></li>
        <li><a href="#" id="changeText2">inclusive Class</a></li>
        <li><a href="#" id="changeText3">inclusive Class</a></li>
        <li class="end"><a href="#" id="changeText5">inclusive Class</a></li>
    </ul>

長いテキストで元のビットを表示する方法を教えてください。

4

2 に答える 2

0

その理由は、あなたのul（タブ）がarticle.col幅を持っている267pxので、あなたが言うとき100%、ul widthそれはそれだけ拡大するからです。

1000pxにします。

tabs a幅も削除します。

于 2013-03-24T11:57:34.117 に答える
0

article.col1問題です。定義が固定されています。widthに増やすだけで、100%以前と同じように機能します。

于 2013-03-24T12:43:23.897 に答える