div宽度扩展答案

【问题标题】：Div width expandingdiv宽度扩展
【发布时间】：2026-01-13 18:20:07
【问题描述】：

我在将 div 容器自动设置为页面的全宽时遇到问题，而我实际上只希望它扩展以适应内容。这是 HTML：

<!doctype html>
<html>
<!-- Head -->
<head>
    <title>html_blocked_text</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />   

    <!-- Area for Additional Links -->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='html_blocked_text.css' rel='stylesheet' type='text/css' />
</head>

<!-- Body -->
<body>
    <div id="container">
        <div class='block'>
            <div class='letter'>S</div>
        </div>
        <div class='block'>
            <div class='letter'>T</div>
        </div>
        <div class='block'>
            <div class='letter'>A</div>
        </div>
        <div class='block'>
            <div class='letter'>Y</div>
        </div>
    </div>
</body>
</html>

CSS：

body {
    background-color: #B8FFDB;
}

#container {
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}

.block {
    overflow: hidden;
    background-color: #003D5C;
    border-radius: 5px;
    float: left;
    margin: 1px;
    padding: 5px;
}

.letter {
    font-family: 'Montserrat';
    color: white;
    font-size: 25px;
}

以及结果（25px 和 50px）：

问题是：最后一个字母后的所有空格。如何去掉最后一个字母右侧的空白？我只希望该容器包裹内容（即字母）。

【问题讨论】：

#container {display: inline-block;
float:left、display:inline 或 display:inline-block 应该可以满足您的需求。

标签： html css

【解决方案1】：

将display: inline-block 添加到#container。

#container {display: inline-block;}

http://jsfiddle.net/0sh4uwnf/

【讨论】：

你赢得了比赛。所以+1
@zazu：这不是一场比赛，只是一个问题太简单了，以至于有更多相同的答案:-)
但是你先回答了，这意味着这是一场比赛，你赢了:)

【解决方案2】：

您可以添加display : inline-block 或float : left 来避免这个问题：

#container {
background-color: white;
border-radius: 5px;
overflow: hidden;
float: left;   
}

Live demo

【讨论】：

【解决方案3】：

div 是一个 block 容器，因此它获取其父元素的宽度，在您的情况下，主体元素是页面的整个宽度。

#container {
    display:inline-block;
}

应该会给你想要的结果

【讨论】：