JSFiddle - React, Tailwind, and code Playground

by ivangalin

HTML

<div id="outer" style="position:relative">
    Выравнивание: <input type="radio" id="rAlignJustify" name="align" value="justify" checked>
                        <span>justify</span>
                  <input type="radio" id="rAlignCenter" name="align" value="center">
                        <span>center</span>
    <div class="test-box">
        <ul>
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
            <li>Пункт 4</li>
            <li>Пункт 5</li>
            <li>Пункт 6</li>
            <li>Пункт 7</li>
        </ul>
    </div>
</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII="/>

CSS

#outer {
    margin: 10px;
    padding: 5px;
    overflow:hidden;
    border: 1px dotted red;
}
.test-box {
    background: #F8F7EF; 
    border: 1px dashed #000;
    border-bottom: 1px dashed #000;
    padding: 10px;
    max-width: 699px;
    min-width: 450px;
}
.test-box:before {
    display: block;
    font-size: larger;
    margin-bottom: 10px;
    text-align: center;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    outline: blue 1px dotted;
    line-height: 0;
}
ul li {
    display : inline-block;
    width : 96px;
    height: 96px;
    margin: 0;
    background: #E76D13;
    vertical-align: top;
    border: 2px red dashed;
    line-height: normal;
    
    /* эмуляция inline-block для IE6-7*/
    //display : inline;
    //zoom : 1;
    
    /* Корректировка для IE6-7*/
    //margin-right: 5px;
}

input[name="align"][value="justify"]:checked ~ .test-box ul { text-align: justify; }
input[name="align"][value="justify"]:checked ~ .test-box:before { content: 'text-align: justify;' }
input[name="align"][value="center"]:checked ~ .test-box { text-align: center; }
input[name="align"][value="center"]:checked ~ .test-box:before { content: 'text-align: center;' }
ul:after {
    vertical-align: top;
    content: ' i i i i i i i i i i i i i i i i'; 
    word-spacing: 97px; 
    padding-left: 97px;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    --outline: 1px solid lime;
    font-size: 12px;
}
ul span {
    vertical-align: top;
    display: inline-block;
    visibility: hidden;
    height: 0;
    width: 100px;
    overflow: hidden;
}