将列表设计为水平答案

【问题标题】：design of a list to horizontal将列表设计为水平
【发布时间】：2019-03-25 08:12:37
【问题描述】：

我想将网站的视图从垂直列表更改为水平。
我所做的每一次更改都隐藏了我的数据。我该怎么做？
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

【问题讨论】：

您的意思是要横向滚动吗？或者只是在有空间的地方将项目并排显示？
项目彼此简单地相邻。显示：内联块；它改变了一些，但像：link 更好的方式？谢谢！
您能否创建一个 StackBlitz 来重现您的问题？
尝试给li显示：inline-block;和宽度：到一些具体的，就像你给 img 标签和 p 给 word-break: break-all;
你有没有看过 flexbox，它可以为你提供高度的灵活性来处理这类事情？

标签： html angular css

【解决方案1】：

尝试使用 flexbox，在 Products 标题之后赋予 ul 这种样式 display: flex 并从 css 中的 ul 中删除 overflow: hidden。 flex中默认的方向是row，如果你想改成column，只要加上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>

【讨论】：