CSS: отзывчивый макет не ведет себя так (математически) должен

Question

Я занимаюсь раскладкой из трех столбцов, которая должна вести себя отзывчиво.

Когда ширина экрана становится меньше, чем 1025px, тогда три столбца, которые упорядочены рядом друг с другом на больших экранах, складываются друг на друга.

Неупорядоченный список, который содержит левый столбец, должен быть упорядочен по горизонтали (вместо вертикали).

Родительский div имеет ширину 800 пикселей. Нет полей, границ, прокладок. Улица как дочерний элемент наследует эту ширину.

Я даю (четыре) li-элемента ширину 25%, что приводит к ожидаемому 200px. In может видеть это в инструментах разработчика.

Но 4 элемента списка не остаются в одной строке. Последний элемент разбивается на другую строку.

В настоящее время я не вижу причин, почему. 4 * 200px = 800px =>Он должен совпадать с родительским элементом.

Я мог бы сделать:

ul li { 
    ... 
    width: calc(25% - 4px); 
    ... 
} 

... тогда она будет работать. Но не хотят, чтобы принять этот подход ...

Так поэтому:

Может кто-нибудь сказать мне, почему я получаю этот разрыв строку, хотя она должна соответствовать?

Вот код:

$rad: 10px; 
 

 
.content h2 { 
 
    margin-top: 20px; 
 
} 
 

 
.content { 
 
background-color: #343434; 
 
color: white; 
 
width: 60%; 
 
} 
 

 
.wrap { 
 
    max-width: 800px; 
 
    margin: 50px auto; 
 
    display: flex; 
 
} 
 

 
.left-column { 
 
    background-color: #dedede; 
 
    width: 10%; 
 
} 
 

 
.right-column { 
 
    background-color: lighten(grey, 10%); 
 
    width: 30%; 
 
} 
 

 
.column { 
 
    padding: 0 25px; 
 
    border-radius: $rad; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
@media (max-width: 1024px) { 
 
    .wrap { 
 
    flex-direction: column; 
 
    } 
 
    
 
    .content { 
 
    width: 100%; 
 
    order: 3; 
 
    } 
 
    
 
    .left-column { 
 
    width: 100%; 
 
    order: 1; 
 
    } 
 
    
 
    .right-column { 
 
    width: 100%; 
 
    order: 2; 
 
    } 
 
    
 
    ul li { 
 
    display: inline-block; 
 
    background-color: #efefef; 
 
    width: 25%; 
 
    text-align: center; 
 
    border-radius: $rad; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="left-column column"> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     <li>Four</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content column"> 
 
    <h2>Nam quam nunc blandit vel</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p> 
 
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> 
 
    </div> 
 

 
    <div class="right-column column"> 
 
    <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> 
 
    <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p> 
 
    </div> 
 
</div>

Answer 1

Вы можете решить эту проблему, установив float к <li> элементов. Это скажет им «плавать рядом друг с другом».

ul li { 
    float: left; 
    background-color: #efefef; 
    width: 25%; 
    text-align: center; 
    border-radius: $rad; 
}