解决导航条占宽度让内容换行了

作者: Lia代码猪崽 | 来源:发表于2018-09-29 15:34 被阅读4次

解决导航条占宽度让内容换行了
Css基础
使用bootstrap+jQuery创建右侧导航条
UINavigationBar与状态栏重合
问题合集
day22课堂总结
仿爱奇艺/腾讯视频ViewPager导航条实现
CSS-实战-梯形背景导航
前端(塌陷)
2018-10-31day3-css属性布局

一个背景色为粉色的父模块的高度和宽度都为200px，子模块的宽度为100px，这样一行刚好可以放下两个，高度为50px。但是，如果当出现了八个以上，也就是四行以后，由于垂直方向的滚动条的出现，会占用到父模块的宽度，一行就不能放下两个子模块了，子模块会自动换行。如图所示：

不知不觉换行了

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>不让滚动条影响内容宽度</title>
    <style>
        .parent {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: pink;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .children{
            float: left;
            display: inline-block;
            width: 100px;
            height: 40px;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
    <div class="children">123</div>
    <div class="children">321</div>
</div>
</body>

</html>

解决方案：加一个中间层（over），比父层的宽度多大约20px（据说导航条的宽度都是20px），就可以解决了。overflow-x: hidden;能避免水平方向的导航条出现。

一行能显示两个

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>不让滚动条影响内容宽度</title>
    <style>
        .parent {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: pink;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .over {
            display: inline-block;
            width: calc(100% + 20px);
            height: 100%;
        }
        .children{
            float: left;
            display: inline-block;
            width: 100px;
            height: 40px;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="over">
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
        <div class="children">123</div>
        <div class="children">321</div>
    </div>
</div>
</body>

</html>