HTML List element : Sharing the parent width into equal parts

后端 未结 5 1898
無奈伤痛
無奈伤痛 2020-12-01 06:39

I have a parent

    and couple of
  1. items in that.

      &
5条回答
  •  盖世英雄少女心
    2020-12-01 07:20

    Try this: http://jsfiddle.net/QzYAr/

    • For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
    • table-layout: fixed ensures equal width li elements.

    CSS:

    ol {
        width: 400px;
        /*width: 800px;*/
    
        display: table;
        table-layout: fixed; /* the magic dust that ensures equal width */
        background: #ccc
    }
    ol > li {
        display: table-cell;
        border: 1px dashed red;
        text-align: center
    }
    

    HTML:

    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4

提交回复
热议问题