如何修改display: inline元素的宽度？我的inline盒子宽度设置无效

你给子div设置的display: inline是行内元素属性，行内元素不支持设置width和height，它的宽度完全由内部内容、padding等撑开，所以修改width不会有任何效果。另外，行内元素之间的换行或空格会被浏览器解析成空白字符，导致盒子之间出现额外间隙。

推荐两种常用的实现方式：

方式一：使用inline-block #

将子元素的display改为inline-block，它兼具行内元素的并排特性和块级元素可设置宽高的属性，同时处理元素间的空白间隙：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #container {
            width: 1500px;
            font-size: 0; /* 消除行内块元素间的空白间隙 */
        }
        #container div {
            width: 100px;
            display: inline-block;
            background-color: gray;
            padding: 20px;
            font-size: 16px; /* 还原文字大小 */
            box-sizing: border-box; /* 让padding包含在100px宽度内，避免盒子变宽 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
        <div>Box 4</div>
        <div>Box 5</div>
        <div>Box 6</div>
        <div>Box 7</div>
        <div>Box 8</div>
        <div>Box 9</div>
        <div>Box 10</div>
    </div>
</body>
</html>

方式二：使用Flex布局（更推荐） #

Flex是现代CSS布局方案，实现横向排列更简单，无需处理空白间隙：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #container {
            width: 1500px;
            display: flex; /* 启用flex布局 */
        }
        #container div {
            width: 100px;
            background-color: gray;
            padding: 20px;
            box-sizing: border-box; /* 可选：让padding包含在宽度内 */
        }
    </style>
</head>
<body>
    <div id="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
        <div>Box 4</div>
        <div>Box 5</div>
        <div>Box 6</div>
        <div>Box 7</div>
        <div>Box 8</div>
        <div>Box 9</div>
        <div>Box 10</div>
    </div>
</body>
</html>

注：box-sizing: border-box是可选属性，作用是让元素的padding、border都包含在设置的width值内，避免盒子实际宽度超出预期。

内容的提问来源于stack exchange，提问作者scholu