0

ウェブサイトのメニューを作りたいのですが、SEOにはULとLIだけが必要です。次のようになります。

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>

liごとに1つのリンクが必要です。水平。動的である必要があります。リンクのテキストを変更すると、自動的に調整される必要があります（したがって、理論的には、固定幅を使用しないでください<li>）。

ここに画像の説明を入力してください

これは（多かれ少なかれ）レイアウトがどうあるべきかです。ペアリンクの各ブロックの最大長サイズ間の実際の距離を計算していないため、多かれ少なかれ。たとえば、各ブロックに20ピクセル残っているとします。

ご覧のとおり、リンクのブロック（1pxの境界線がある場所）間の距離は、コンテナー（つまり、リンクの各ペアの長さ）によって異なります。ulの中で異なる要素を使用することはできませんli。これが主な問題です。

これが可能かどうか何か考えはありますか？いろいろ試してみましたが、どうすれば手に入るのかわかりません（作り方がわからない最初のメニューです）。

どんな入力でもいいでしょう...

4

2 に答える 2

0

サポートされているブラウザーには、純粋な CSS3 の方法があります (-webkit、-moz の混乱があるのは残念です)。

ul { 
  border-left:2px solid #cc0;
  border-right:2px solid #cc0;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  column-count: 3;
  column-gap: 5px;
  -webkit-column-rule-color: #cc0;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 2px;
  -moz-column-rule-color: #cc0;
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 2px;
  column-rule-color: #cc0;
  column-rule-style: solid;
  column-rule-width: 2px;
}
li {
  white-space:nowrap;
}

この jsfiddle のようにhttp://jsfiddle.net/hyxxJ/5/

于 2012-04-27T21:34:23.433 に答える
0

これを CSS に追加します。

li { float: left; display: block; }

jQuery ソリューションは次のとおりです: http://jsfiddle.net/ADtke/5/

于 2012-04-27T15:41:44.920 に答える