时间戳

首页 > 解决方案 > 动态生成的 ul(s) 未在中心对齐

css - 动态生成的 ul(s) 未在中心对齐

问题描述

我被困了很长时间，谷歌搜索对我没有多大帮助。我正在ul动态生成（s），它们的计数也可能非常取决于从数据库中找到的项目数。

这是它的样子：

截屏

编码：

CSS：

#container{
 align-content: center;
}

ul{
  display:inline-flex;
  padding: 5px;
}

哈巴狗：

 div(id="container")
         each item in items_list
             ul
              a(href=somelink)

                div(class="image")
                  //- a(href=url)
                  img(src="/images.link", alt="", height="120px", width="160px", class="dp")
                  p(id="title") Title:- #{item.title}
                  p(id="stuff") stuff:- #{item.stuff}

我已经尝试过align-content,justify content等。此外，我没有给出类似的属性，因为 s 的margin-left数量ul会有所不同。（我希望它们以水平方式显示。）

标签： csspug

解决方案

首先认为您错过了需要在ul之后列出的li标签

我不确定你想要哪个，但我想你想要这个。这是简单的演示代码

 #container {
        align-content: center;
    }

    ul {
        padding: 5px;
    }

    li {
        list-style: none;
    }

    a {
        float: right;
    }

    div {
        float: left;
    }

    p {
        float: left;
        margin-left: 20px;
    }
<div id="container">
    <ul>
        <li>
            <a href="#">
                <div>
                    <p id="title">Test Code title1</p>
                    <p id="stuff">Test Code stuff1</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div>
                    <p id="title">Test Code title2</p>
                    <p id="stuff">Test Code stuff2</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div>
                    <p id="title">Test Code title3</p>
                    <p id="stuff">Test Code stuff3</p>
                </div>
            </a>
        </li>
    </ul>
</div>

推荐阅读