在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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

回答
編輯回答
陪妳哭

在span上加個屬性 white-space: nowrap;強制不換行

span的寬度達到最大寬度也就是父元素寬度，是會自動換行的

2018年6月29日 01:14