оформление росписи по горизонтали

Question

Я хочу изменить вид веб-сайта с вертикального списка на горизонтальный.
Каждое изменение, которое я действительно скрывал свои данные.Как я могу это сделать?
css:

img {
    max-width: 600px;
    height: 200px;
    background-color: powderblue;
}
ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;

}
li{
    margin-right: 0px;
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}

html:

    <h2>store</h2>
<ul>
  <li *ngFor="let store of stores">

    <h4>Products:</h4>
    <ul>
      <li *ngFor="let product of store.Products">
          <img src={{product.ProductImage}}>
          <p>store: {{ store.StoreName }}</p>
          <p>Product Price: {{ product.Price }}</p>
        <p>Product Title: {{ product.ProductTitle }}</p>

      </li>
    </ul>
  </li>
</ul> 

и внешний вид сайта: website

Answer 1

Попробуйте использовать flexbox, задайте ul после заголовка Products этот стиль display: flex и удалите переполнение : hidden из ul в css.Направление по умолчанию в flex - строка , если вы хотите изменить его на столбец, просто добавьте flex-direction: column;

<h2>store</h2>
<ul>
  <li *ngFor="let store of stores">

    <h4>Products:</h4>
    **<ul style="display:flex">**
      <li *ngFor="let product of store.Products">
          <img src={{product.ProductImage}}>
          <p>store: {{ store.StoreName }}</p>
          <p>Product Price: {{ product.Price }}</p>
        <p>Product Title: {{ product.ProductTitle }}</p>

      </li>
    </ul>
  </li>
</ul>