h3采用全宽度

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;
        }
    }

请在这里看到我想要的图片。图像

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>

​

Answer 2

如果删除HTML列表提供的所有功能，则可能不需要列表。我建议用div代替。将容器设置为

display: flex;
justify-content: space-between;

得到你想要的布局。

​

.container {
  display: flex;
  justify-content: space-between;
}

.icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
}

h4 {
  font-size: 50px;
  font-weight: bold;
}

img {
  width: 6rem;
}

<div class="container">
  <div class="icon">
    <img src="https://via.placeholder.com/200" alt="post" />
    <h4>1. Post</h4>
  </div>
  <div class="icon">
    <img src="https://via.placeholder.com/200" alt="wait" />
    <h4>2. Wait</h4>
  </div>
  <div class="icon">
    <img src="https://via.placeholder.com/200" alt="select" />
    <h4>3. Select</h4>
  </div>
</div>

​

Answer 3

请试试这个：

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>

SCSS：

ul{
    padding-left: 0;
    list-style: none;
    li{
        float: left;
        display: inline-block;
        width: 33.33%;
        text-align: center;
        h4{
            display:inline-block;
            width: 100%;
        }
    }
    img{
        width: 6rem;
    }
}