多个div不换行显示

最新推荐文章于 2025-06-02 16:48:36 发布

原创最新推荐文章于 2025-06-02 16:48:36 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .test {
            width: 20%;
            height: 100px;
            background-color: #808080;
            overflow: hidden;
            white-space: nowrap;
        }

        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box" style="background-color: #f00">我是左边</div>
        <div class="box" style="background-color: #ffd800">我是中间</div>
        <div class="box" id="ces" style="background-color: #00ff21">我是右边</div>
    </div>
</body>
</html>