Как выровнять список изображений по прямой линии в html / css?

Question

У меня есть скрипка , в которой я хочу перечислить изображения по прямой линии с достаточным интервалом между ними , как на скриншоте ниже:

HTML-код, который я использовал для размещения списка изображений на прямой линии:

<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" width="150" height="44" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7072">
</div>

CSS-коды , которые я пробовал (, но это не сработало ), чтобы поместить список изображений в прямую линию с достаточным интервалом:

.images
{
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.images img
{
padding-left: 2%;
padding-right: 2%;
}

При использовании вышеуказанных CSS-кодов изображения располагаются в центре, но кажется, что они полностью уменьшаются.

Постановка задачи:

Мне интересно, какие CSS-коды я должен добавить в скрипку, чтобы список изображений отображался по прямой линии с достаточным интервалом между ними.

Answer 1

Попробуйте внедрить эти модификации в ваш код, который работает для меня. vw означает ширина области просмотра

установите width="90vw" для каждого изображения в вашем html-файле и измените следующее на ваш css.

.images img
{
padding-left: 1vw;
padding-right: 1vw;
}

Answer 2

Я отредактировал вашу скрипку

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: 5rem;
  height: auto
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">
</div>

</body>

</html>