html溢出x失败

html overflow x failed

本文关键字：失败 溢出 html      更新时间：2023-09-26

我遇到了一个奇怪的问题，我设置了一个样式为的div

overflow-x：滚动

但结果是它没有溢出，只是从一行开始，我的源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
  <style>
    .fl {
      float: left;
    }
    .cp-header {
      height: 40px;
      padding: 7px 0px;
      border-bottom: 2px solid #cdcdcd;
      box-sizing: border-box;
    }
    .cp-header span {
      display: inline-block;
      border-right: 2px solid #cdcdcd;
      box-sizing: border-box;
      text-align: center;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div style="width: 30%; box-sizing: border-box" class="fl">
    <div class="cp-header" style="width:100%;">
      <span style="width:100%;">name</span>
    </div>
  </div>
  <div id="tabGrp" style="width: 70%; box-sizing: border-box;" class="fl">
    <div class="cp-header" style="display: inline-block; overflow-x: scroll; white-space: nowrap;">
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
    </div>
  </div>
</body>
</html>

正如你从上面看到的，我希望"#tabGrp"中的内容可以水平滚动，因为我已经设置了overflow-x:scroll属性，如果它的子元素的宽度超过了父元素的宽度，则父元素应该滚动，但它不起作用，我有什么问题吗？

2件事，你的span不能有/不需要float，cp-header需要一个宽度

注意，你不想混合内联和外部风格，所以我把它改为外部（推荐）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <style>
      .tabCap {
        width: 30%;
        box-sizing: border-box;
      }
      .tabGrp {
        width: 70%;
        box-sizing: border-box;
      }
      .fl {
        float: left;
      }
      .cp-header {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        padding: 7px 0px;
        border-bottom: 2px solid #cdcdcd;
        box-sizing: border-box;
      }
      .cp-header.scroll {
        overflow-x: scroll;
      }    
      .cp-header span {
        display: inline-block;
        width: 100%;
        border-right: 2px solid #cdcdcd;
        box-sizing: border-box;
        text-align: center;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
      }
      .cp-header.scroll span {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="tabCap fl">
      <div class="cp-header">
        <span>name</span>
      </div>
    </div>
    <div class="tabGrp fl">
      <div class="cp-header scroll">
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
      </div>
    </div>
  </body>
</html>

根据评论进行更新。

span之间的空白是由标记中的换行引起的空白。这种情况发生在所有内联元素上。

这里有一种方法可以解决这个问题，将开始和结束标签放在同一行上

更新的plnkr

<span>
    tab
</span><span>
    tab
</span>

它对我来说很好，检查这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <style>
        .fl2 {
            float:left;
        }
        .cp-header {
            height: 40px;
            padding: 7px 0px;
            border-bottom: 2px solid #cdcdcd;
            box-sizing: border-box;
        }
        .cp-header span {
            display: inline-block;
            border-right: 2px solid #cdcdcd;
            box-sizing: border-box;
            text-align: center;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div style="width: 30%; box-sizing: border-box" class="fl2">
        <div class="cp-header" style="width:100%;">
            <span style="width:100%;">name</span>
        </div>
    </div>
    <div id="tabGrp" style="width: 70%; box-sizing: border-box;" class="fl2">
        <div class="cp-header" style="width: 100%; display: inline-block; overflow-x: scroll; white-space: nowrap;">
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
        </div>
    </div>
</body>
</html>

相关文章：