2

これは、この問題に対する私の 2 回目の試みであり、まだ修正を思いつくことができません。私の問題は、リンクのリストを取得して列に分割することに関連しています。ユーザーが複数のユーザー名を持つサイトを運営しているため、ジャンプリストが動的に生成されます。これは、どのタイプの静的ソリューションも機能しないことを意味します。リストは、コンテンツに合わせて動的に拡張できる必要があります。

    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;

それを投げ込むことで、私の問題は解決したはずです。やった、またはそう思った、私はFirefoxでそれをいじっただけで、私が描いたとおりに機能しました。その後、chrome ユーザーから苦情が寄せられました。クロムでは、列はリスト項目を並べて配置することを拒否し、最大の幅しかとらないようです。それよりもうまく説明する方法がよくわからないので、デモ用にjsfiddleを作成しました。私が作成した元のリストと、column-countプロパティを入れることを示しています。

Firefox や Opera で見ると、問題なく表示され、意図したとおりに表示され、ブラウザは 3 つの列すべてのサイズを取得します。クロムで見ると、3 つの列すべてが表示されますが、複数の列に分割される前に、列内の最大のアイテムの長さによって制約されます。これは、インスペクターを使用して列ルールのオンとオフを切り替えることで確認できます。

だから今、どうすればクロムが私の列を尊重し、これを正しい方法で表示することができますか? またはそれは可能です。

4

3 に答える 3

1

ulコンテナの幅で修正できました。お役に立てば幸いです：

.multi ul {
    width:500px;
}

更新されたフィドルを参照してください。あなたはFirefoxとOperaで正しく機能していますが、Chromeでは機能していません。他のcss列パラメーターを試してみましたが成功しませんでした。

于 2013-03-15T08:05:53.047 に答える
1

CSS に column-count プロパティが存在することさえ知りませんでした。新しいことを学びました。

ただし、IE ではサポートされていないため、別の解決策を提案させてください。行/スパン レイアウト スタイルのような Twitter Bootstrap を使用しています。ブートストラップを含めると、CSS は非常にシンプルになります。

欠点は、各列の上から下ではなく、左から右に項目がリストされることです。

jsfiddle

HTML:

<div class="wrapper left">
    <div class="single">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
    </div>
</div>
<div class="wrapper right">
    <div class="multi">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
    </div>
</div>

CSS:

.wrapper {
    border-radius:10px;
    overflow:hidden;
}
.single, .multi {
    display:block;
    margin-left:-5px;
}
.single ul {
    width:205px;
}
.multi ul {
    width:615px;    
}
ul {
    background-color:#545454;
    border-radius:10px;
    display:block;
    margin: 0;
    padding:0;
}
ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
li {
    background-color:#CACACA;
    border-radius:10px;
    display:block;
    float:left;
    margin-left:5px;
    padding:5px 10px;
    width:180px;
}
a {
    text-align:left;
    white-space:nowrap;
}
.left {
    left: 10px;
    position: absolute;
    top: 0;
}
.right {
    left: 220px;
    position: absolute;
    top: 0;
}
于 2013-03-15T08:17:03.420 に答える
0

HTMLを少し変更し、その他のCSSをいくつか変更して、なんとか動作させることができました

HTML:

<div class="multi">
        <ul>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">dolor sit amet</a></li>
            <li><a href="#">consectetur</a></li>
            <li><a href="#">adipiscing elit</a></li>
            <li><a href="#">sit amet erat</a></li>
            <li><a href="#">congue</a></li>
            <li><a href="#">quis dolor in orci</a></li>
            <li><a href="#">venenatis vel</a></li>
            <li><a href="#">Vivamus</a></li>
        </ul>
</div>

これがリストを書く正しい方法だと私は信じています。

CSS:

.multi li {
    display: inline-block;
       width:100%;
}
.multi a {
    text-align:left;
    display:block;
    text-align:left;
    padding:5px 10px;
    position:relative;
    white-space:nowrap;
    background-color:#CACACA;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    display: inline-block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

デモ: http://jsfiddle.net/LepMN/2/

于 2013-03-15T08:49:15.810 に答える