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>

Answer 2

请尝试以下操作：

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

Answer 3

如果删除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 4

请尝试使用此代码

<html>
<head>
    <style>
        ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        ul li{
            display: flex;
            flex-direction: column;
        }
        ul li h4 {
            display: inline;
        }
        ul li img {
            width: 6rem;
        }
    </style>

</head>    

<body>
    <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> 
</body>
</html>

h3占用全角

4 个答案: