Question

我有一个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）：

25px for Text Size 50px for Text Size

问题是：最后一个字母后面的所有空格。如何取走最后一个字母右侧的空白区域？我只希望那个容器包裹内容（即字母）。

Answer 1

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

#container {display: inline-block;}

http://jsfiddle.net/0sh4uwnf/

Answer 2

您可以添加display : inline-block或float : left两者都可以避免此问题：

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

Live demo

Answer 3

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

#container {
    display:inline-block;
}

应该给你想要的结果

Div宽度扩大

3 个答案: