博客

问题：

.goods-list{background-color: #f3fbfe;  padding: 10px 20px;}
.good-msg span{display: inline-block;width: 10%;}
.good-msg .p-name{width: 60%;}
.good-msg .p-price{color: #e4393c;font-weight: bold;}
.good-msg .p-delivery{text-align: right}

  <div class="row goods-list">
    <p class="good-msg">
      <!-- span 换了行被解析成空格-->
      <span class="p-name">商品名称11</span>
      <span class="p-price">￥4499.00</span>
      <span class="p-num">x1</span>
      <span class="p-state">有货</span>
      <span class="p-delivery">免邮</span>
    </p>
    <p class="good-msg">
      <!-- span 未换行-->
      <span class="p-name">商品名称22</span><span class="p-price">￥49.00</span><span class="p-num">x1</span><span class="p-state">有货</span><span class="p-delivery">免邮</span>
    </p>
  </div>

原因：

inline-block

【特征】

[1]不设置宽度时，内容撑开宽度

[2]非独占一行

[3]支持宽高

[4]代码换行被解析成空格

解决方法：

1、为inline-block元素添加样式float:left (推荐)

.good-msg span{display: inline-block;width: 10%;float:left}

2、删去元素之间的空白

<span class=”p-name”>商品名称22</span><span class=”p-price”>￥49.00</span><span class=”p-num”>x1</span><span class=”p-state”>有货</span><span class=”p-delivery”>免邮</span>

———-

<span class=”p-name”>

商品名称22</span><span class=”p-price”>

￥49.00</span><span class=”p-num”>

x1</span><span class=”p-state”>

有货</span><span class=”p-delivery”>

免邮</span>

———-

<span class=”p-name”>商品名称22</span><span

class=”p-price”>￥49.00</span><span

class=”p-num”>x1</span><span

class=”p-state”>有货</span><span

class=”p-delivery”>免邮</span>

参考：

inline-block元素之间的空隙的消除方法