4

データベースからのアイテムのリストがあります：

<ul>
    <li>Jon Skeet</li>
    <li>Darin Dimitrov</li>
    <li>Marc Gravell</li>
    <li>BalusC</li>
    <li>Hans Passant</li>
    <li>SLaks</li>
    <li>VonC</li>
    <li>Greg Hewgill</li>
    <li>JaredPar</li>
</ul>

リストは必要に応じて折り返され、各行には水平線が必要で、次のようになります。

____________________________________________________
 Jon Skeet   Darin Dimitrov   Marc Gravell   BalusC
____________________________________________________
 Hans Passant   SLaks   VonC   Greg Hewgill
____________________________________________________
 JaredPar
____________________________________________________

ただし、行にフルレングスの行を含める方法がわからないため、次のようになります。

____________________________________________________
 Jon Skeet   Darin Dimitrov   Marc Gravell   BalusC
____________________________________________
 Hans Passant   SLaks   VonC   Greg Hewgill
__________
 JaredPar
__________

を使用してみましdisplay:table-cellたが、連続していくつあるべきかがわからない限り、それらをラップする方法を理解できません（私はそうしません）。

jsfiddleを用意して、どこまで進んだか、どのように表示されるかを説明しました。助言がありますか？

4

3 に答える 3

2

線形グラデーションを繰り返して遊ぶことができます - DEMO

ul, section {
    margin: 40px;
    max-width: 350px;
    border-bottom: 1px solid #000;

    background: -moz-repeating-linear-gradient(to bottom, black, black 1px, white 1px, white 36px);
    background: -webkit-repeating-linear-gradient(black 0, white 1px, white 36px);
}

li {
    display: inline-block;
    padding: 0.5em;
}
​
于 2012-09-21T17:45:41.313 に答える
0

これは、さまざまなフォントサイズ、または異なる高さの要素でも機能します。

ul {
    overflow: hidden;
    width: 300px;
    border: solid #000;
    border-width: 1px 0;
    padding: 0;
}

li {

    padding: 5px 20px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

li:before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    background: #000;
    height: 1px;
    width: 300px;
}

これにより、各要素の上部に絶対位置の全幅の線が追加され、余分な部分が非表示になります。

于 2014-11-13T09:20:31.307 に答える
0

inline-block でうまくいかない場合は、display: block代わりにtable-cellいくつかのプロパティを追加float: leftして、すべてを同じ行に保つことができます。

あなたも一緒に遊ぶことができclear: bothます。それを行うには実際には多くの方法があります。それはあなたが何を好むか、そしてIE6または古い携帯電話で動作させたいかどうかによって異なります...

于 2012-09-21T17:51:54.907 に答える