0

幅が可変の列を持つ固定幅のテーブルが必要なので、コンテンツによって異なりますが、これらのコンテンツ間の水平距離は同じです。

これは私が得るものです：

-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|

これは私が欲しいものです:

----------------Table Width------------------
|---Long Content---|---Content---|---More---|

コンテンツ セルのマイナス記号の数に注意してください。スクリーンショットを使用して列のコンテンツ間のスペースを測定すると、必ずしも正確に同じではないことがわかります。

これは私のマークアップです:

<ul>
    <li>Long Content</li>
    <li>Content</li>
    <li>More</li>
</ul>

これは私の動作しないスタイルシートです:

ul {
    display: table;
    width: 600px;
}

li {
    display: table-cell;
    text-align: center;
    border: solid 1px #000;
}

ここに私の jsFiddle があります: http://jsfiddle.net/ATwqk/12/。どうすれば望ましい結果を得ることができますか?

4

3 に答える 3

0

左右のパディング プロパティを 2.5em に設定する必要があります。ただし、これが機能するのは、区切りがないか、すべてのセルが内容を壊している場合のみです。

ul {
    display: table;
    width: 300px;
}

li {
    display: table-cell;
    text-align: center;
    border: solid 1px #000;
    padding: 0 2.5em;
}
于 2013-08-22T15:05:07.707 に答える
0

私がこれを正しく理解していれば、ul の周りに固定幅の div をラップしてみることができます。幅:100%; ul と width:50% で li

http://jsfiddle.net/ATwqk/3/

#wrapper{
        width:500px;
    }
    ul {
        display: table;
        width: 100%;
    }

    li {
        display: table-cell;
        text-align: center;
        border: solid 1px #000;
        width:50%
    }

<div id="wrapper">
<ul>
    <li>Long Contentdsdddddddddddd</li>
    <li>Content</li>
</ul>
</div>
于 2013-08-22T15:07:24.343 に答える
0

これを ul タグで試してください。これはまさにあなたが望むことをするはずです。

ul
{
    display: flex;
    justify-content: space-between;
    width: 600px;
}

更新された jsfiddle:

http://jsfiddle.net/ATwqk/19/

于 2015-08-07T09:06:43.573 に答える