search

Home  >  Q&A  >  body text

html - CSS 使inline-block纵向排列

CSS 使inline-block纵向排列,让li纵向排列,当不够空间的时候会换列。

正常情况下如果设置了ul 的宽度,li的高和宽,inline-block之后,li会横向排列,当空间不够会换行。

现在希望把横向换成纵向。

实现的目标:当设置了ul的高度之后li会按列像下排列。当空间不够的时候换列。
用flex布局很容易实现,但是鉴于flex布局的兼容性,所以想问问各位大神 inline-block float这些或者其他的方法可以实现吗?

PHP中文网PHP中文网2778 days ago806

reply all(4)I'll reply

  • 天蓬老师

    天蓬老师2017-04-17 11:50:22

    <style type="text/css">
        ul, li {
            margin: 0;
            padding: 0;
        }
    
        ul {
            height: 300px;
            line-height: 0;
            font-size: 0;
            -ms-writing-mode: tb-lr;
            -webkit-writing-mode: vertical-lr;
            writing-mode: vertical-lr;
        }
    
        li {
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            background: #ff0000;
            -ms-writing-mode: lr-tb;
            -webkit-writing-mode: horizontal-tb;
            writing-mode: horizontal-tb;
        }
    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    

    IE8 and above, supported by modern browsers.

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:50:22

    Nothing is needed, inline-block will automatically wrap lines

    https://jsfiddle.net/f48jewqa/1/

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:50:22

    Better compatibility than flex
    (Compatible with IE9 and above)
    Slightly difficult to maintain.
    But you can keep the same look in IE9-IE11 without hacking.
    It’s actually better to use JavaScript...

    .itemContainer {
        width: 150px;overflow: auto;
        padding-left: 40px;
        -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0);
        transform: rotate(270deg) matrix(-1,0,0,1,0,0);
        font-size: 13px;color: white;
        list-style: none;
        font-family: "Roboto", Roboto;
    }
    .item {
        -ms-transform: rotate(270deg) matrix(-1,0,0,1,0,0);
        transform: rotate(270deg) matrix(-1,0,0,1,0,0);
        height: 20px;width: 30px;margin: 10px 0;
        background: #039be5;
        text-align: center;line-height: 20px;
        display: inline-block;
    }
    <ul class="itemContainer">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
    </ul>

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:50:22

    css has a column attribute

    .itemContainer {
        width:100px;
        column-count:2;
    }
    .item {
        height: 20px;
        width: 30px;
        margin: 10px 0;
        background: #039be5;
        text-align: center;
        line-height: 20px;
        display: inline-block;
    }

    reply
    0
  • Cancelreply