css 排版問(wèn)題

父級(jí) div 響應(yīng)式寬度，子級(jí) span 固定寬度，想讓子級(jí)居中，父級(jí)使用 text-align: center 得到下面的效果， 最后一行排版想居左，沒(méi)有什么思路...

大概是這么個(gè)布局

div {
  width: 25vw;
  text-align: center;
}
span {
  display: inline-block;
  width: 100px;
  margin: 5px;
  background: #008000;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

回答

編輯回答

撥弦

display: inline-block

2017年7月1日 05:22

編輯回答

傲嬌范

子元素直接浮動(dòng)應(yīng)該可以

2017年8月3日 10:24

編輯回答

爛人

此答案已經(jīng)被作者刪除

2018年6月29日 12:55

編輯回答

情殺

這兩個(gè)圖示自適應(yīng)的么？可能要區(qū)分一下樣式了。

2018年3月12日 11:44

編輯回答

陌如玉

<html>
<style>
  .item {
    width: 120px;
    background-color: #00abff;
    height: 60px;
    margin: 10px;

  }

  .empty {
    height: 0px;
    visibility: hidden;
    width: 120px;
      margin: 10px;
      background: #555;
  }

  .box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
</style>

<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
   
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
     <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
  </div>
</body>

</html>

2018年5月23日 06:23

編輯回答

囍槑

<style>
    .warp {
      width: 25vw;
      /*text-align: center;*/
      border:1px solid red;
    }
    li{
      display: inline-block;
      width: 100px;
      margin: 5px;
      background: #008000;
    }
</style>
<div class="warp">
    <ul class="list">    
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
        <li>span1</li>
    </ul>  
</div>

圖片描述

2018年5月26日 18:34