2

あなたが私を助けてくれることを願っています.私は水平メニューを持っています.私の問題は次のとおりです.

ここに画像の説明を入力

1 つ目はテーブルを使用した通常のストレッチ、2 つ目は私が望むものです:ストレッチ + テキスト間のギャップも均等です。

これは改行しないスペースを追加して実現しましたが、固定メニュー幅でのみ機能するため、メニュー幅を変更する場合は nbsp 文字数を変更する必要があります。cssでこれを行う方法はありますか?これらの非分割スペースはありませんか?

メニューポイントの数とメニューの幅は変更される可能性があるため、javascript を使用しない自動ソリューションが必要です。サーバー側で実行できるアルゴリズムを提供できない限り、個々の列による設定はありません。

これは CSS のみでは可能ではないと思いますが、私は CSS の達人ではないので、質問しました....

<style>
    * {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
    }

    table {
        width: 400px;
    }

    td {
        border: 1px solid blue;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td><a href="#">aa</a></td>
        <td><a href="#">aaaaaaaaaaaaa</a></td>
        <td><a href="#">aaaaaaaaa</a></td>
    </tr>
</table>


<table>
    <tr>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">aa</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;<a href="#">aaaaaaaaaaaaa</a>&nbsp;&nbsp;</td>
        <td>&nbsp;&nbsp;&nbsp;<a href="#">aaaaaaaaa</a>&nbsp;&nbsp;&nbsp;</td>
    </tr>
</table>
4

5 に答える 5

2

ここにすべてのパラメータがあるかどうかはわかりませんが (「ストレッチ」はあまり明確ではありません)、リンクの左右のパディングでそれができるのではないでしょうか? これはメニューなので、テーブルではなく を使用します<ul>。あなたが望むものではない場合、これには多くのバリエーションがあります：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
ul, li {margin: 0; padding: 0;}
ul {list-style: none; display: table; border-spacing: 5px; }
li {display: table-cell; background: #f7f7f7; border: 1px solid blue; }
li a {padding: 0 30px;}
</style>

</head>
<body>

<ul>
    <li><a href="#">aa</a></li>
    <li><a href="#">aaaaaaaaaaaaa</a></li>
    <li><a href="#">aaaaaaaaa</a></li>
</ul>

</body>
</html>
于 2013-04-29T08:56:09.927 に答える
2

編集: 以下の回答は、IE 11 などの最近の Internet Explorer バージョンではうまく機能しません。セル サイズのアルゴリズムは、他のブラウザーとは異なる方法で動作するようです。

これにはいくつかのクロスブラウザー テストが必要ですが、私が使用しているものは次のとおりです。

http://jsfiddle.net/aaronadams/j3cEQ/

HTML:

<p>Default spacing:</p>
<ul>
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>
<p>Even spacing:</p>
<ul class="even">
    <li>aa</li>
    <li>aaaa aaaa aaaa</li>
    <li>aaa aaa aaa</li>
    <li>aa aa</li>
</ul>

CSS:

ul {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 30em;
    text-align: center;
}
li {
    display: table-cell;
    margin: 0;
    padding: 0 0.125em;
    white-space: nowrap;
}
.even li {
    width: 1%;
}

これまでのところ、これにより、すべての画面サイズで非常にうまく機能するメニューが提供されています。モバイルでは画面幅に縮小され、デスクトップでは特定のサイズまで拡大され、リンクは常に均等に配置されます。

インスピレーションのクレジットはこちら: https://stackoverflow.com/a/16509901/802414

于 2014-06-01T21:15:05.153 に答える
0

JSFIDDLE

個々の列の「左右のパディング」を設定できます

HTML

<table>
    <tr>
        <td class="first"><a href="#">aa</a></td>
        <td class="second"><a href="#">aaaaaaaaaaaaa</a></td>
        <td class="third"><a href="#">aaaa aaaaaaaaaaaaa</a></td>
    </tr>
</table>

CSS

table { width: 400px; }
td { border: 1px solid #d3d3d3; text-align: center;}
.first { padding: 0 3em; }
.second { padding: 0 2em; }
.third { padding: 0 4em; }
于 2013-04-29T08:42:27.567 に答える
0

これは、親要素を text-align: justify にし、子要素を display:inline-block; にすることにより、CSS で実現できます。ただし、両端揃えのテキストは、少なくとも 2 行ある場合にのみ適切に機能します。疑似 :after 要素は、余分な (非常に小さな) 行を強制するために使用されます。

#container {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
  min-width: 600px;
}
#container div {
  width: 150px;
  height: 125px;
  display: inline-block;
  background: red;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

この手法については、 https://css-tricks.com/equidistant-objects-with-css/の功績によるものです。

于 2015-03-03T06:38:56.597 に答える