鍍金池/ 問答/HTML/ 盒子固定寬度，內(nèi)容超出無法顯示滾動(dòng)條

盒子固定寬度，內(nèi)容超出無法顯示滾動(dòng)條

<body>
  <div class="layout">
      <div class="left">
          <span>
           第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第 一行 
          </span>
          <span>
           第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行        
         </span>
      </div>
      <div class="right"></div>
  </div>
</body>

樣式：
<style>
      * {
          padding: 0;
          margin: 0;
      }
      html, body {
          height: 100%;
          width: 100%;
      }
      .layout {
          height: 100%;
          width: 100%;
      }
      .left{
          width: 150px;
          height: 100%;
          float: left;
          border: 1px solid #000;
          overflow-x: auto;
      }
      .left span {
          line-height: 26px;
          display: inline-block;
          border-bottom: 1px solid darkblue;
      }
      .right{
          height: 100%;
          overflow: hidden;
          background-color: #e1e1e1;
      }
  </style>

一個(gè)粗略的例子。 左邊的left盒子，是固定了寬度，里面的內(nèi)容span的長度明顯超過了left的寬度，加了overflow-x: auto;后，沒有達(dá)到超出顯示滾動(dòng)條的效果。 是哪里有問題？ 請(qǐng)幫忙看看。

回答
編輯回答
陪妳哭

在span上加個(gè)屬性 white-space: nowrap;強(qiáng)制不換行

span的寬度達(dá)到最大寬度也就是父元素寬度，是會(huì)自動(dòng)換行的

2018年6月29日 01:14