子元素宽度如何撑开父元素宽度

Hanger

649126897

发布于
2017-11-29

如图这是一个横向滚动栏，子元素高度会自动撑开父元素的高度，但是好像子元素宽度不能自动撑开父元素的宽度，如何使用css使子元素宽度可以自动撑开父元素宽度，避免计算父元素的宽度。

javascript html css

阅读 20.6k

8 个回答

Bestime

✓ 已被采纳

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <style>
        .box{width:300px;height:100px;background:#000;}
        .inner{white-space:nowrap;width:auto;display:inline-block;zoom:1;*display:inline;margin:10px 0 0 10px;background:#FC9;}
        .inner span{display:inline-block;width:80px;height:100px;margin:0 10px;background:#dd4215;}
    </style>
    <div class="box">
        <div class="inner">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

图片描述

WillisYe

1.2k1614

发布于
2017-11-29

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 640px;
            margin: 0 auto;
            background-color: #eee;
        }

        .nav {
            overflow-y: auto;
        }

        ul {
            list-style: none;
            display: inline-block;
            white-space: nowrap;
            font-size: 0;
        }

        li {
            display: inline-block;
            width: 80px;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
                <li>test9</li>
            </ul>
        </div>

    </div>
</body>

</html>