0

私はこのような左側のメニューを持っています：

    <table table-layout="fixed" width="800px">
        <tr valign="top">
            <td width="140px" overflow="hidden">
                 <div class="link-list">
                    <ul class="tablist">
                        <li> <a href="/url1/">Short</a> </li>
                        <li> <a href="/url2/">MediumItem</a> </li>
                        <li> <a href="/url3/">ThisIsALongWidthItem</a></li>
                    </ul>
                </div>
            </td>  
            <td>
                  the page main content here                                        
            </td>      
        </tr>   
    </table>

CSSは次のようなものです。

.tablist 
{
list-style:none; 
height:2em;
padding:0; 
margin:0; 
border: none;
white-space:nowrap;
}

.tablist li 
{
float:left; 
margin-right:0.13em;     
}

.tablist li a 
{
display:block;
padding:0.5em 3em;    /*I'm trying to set this value*/
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
}

左の列の全幅を埋めるアイテムを作りたいです。パディングを小さい値に設定すると、アイテムの幅が異なるため、右側にスペースが残ります。だから私はそれを大きな値に設定しようとしています（それが空のスペースを埋めることができるようにホッピングします）が、それらは列のマージンを超え、右側の列の内容と混ざります。列幅で区切るにはどうすればよいですか？

4

2 に答える 2

0

通常のボックスモデルを使用すると、パディングとボーダーが宣言された幅に追加されるため、それらを考慮することが困難になります。そのため、幅からそれらを差し引くために計算を行う必要があります。最良のオプションは、幅にパディングと境界線を含む元のIEボックスモデルに戻ることです（したがって、幅を100％と宣言すると、境界線とパディングを含めて常に100％であることがわかります）。これを行うには、次のcssルールセットを使用します。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; 
}
于 2013-01-25T16:18:28.593 に答える
0

liにmax-widthを設定して、それが親コンテナであることがそれ以上進まないようにすることができます。

max-width: 100%;

これがあなたの言っていることかどうかはわかりませんが。問題を模倣するようにJSFiddleを設定できれば最高です。

幅にliとaの両方を使用することで問題が発生しているようです。

于 2013-01-25T16:21:29.157 に答える