html - h3 占全 Angular

Question

我想制作下图。但是，我无法将 display:inline 和 display: block 组合在一起。如果我使用 display: block， 一切都在同一行。另一方面，如果我使用 display block，每个元素都会换行。这是我的代码

HTML

<ul>
            <li class="icon">
                    <img src="images/how/post.png" alt="post">
                <h4>1. Post</h4>
            </li>
            <li class="icon">
                <img src="images/how/wait.png" alt="wait">
                <h4>2. Wait</h4>
            </li>
            <li class="icon">
                <img src="images/how/select.png" alt="select">
                <h4>3. Select</h4>
            </li>
        </ul>

CSS

ul{
        list-style: none;
        li{
            display: inline;
            h4{
                display:inline;
            }
        }
        img{
            width: 6rem;
        }
    }

请在此处查看我希望它成为的图像。 Image

Answer 1

以这种方式使用 display:inline-block 和 display:block

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}
ul li h4 {
  display: block;
  text-align: center;
}
ul img {
  width: 6rem;
}

img {
  width: 70px;
}

<ul>
            <li class="icon">
                    <img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="post">
                <h4>1. Post</h4>
            </li>
            <li class="icon">
                <img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="wait">
                <h4>2. Wait</h4>
            </li>
            <li class="icon">
                <img src="https://www.google.co.in/logos/doodles/2018/new-years-eve-2018-4995722058399744.2-law.gif" alt="select">
                <h4>3. Select</h4>
            </li>
        </ul>