Html Div宽度扩展_Html_Css - Fatal编程技术网

Html Div宽度扩展

html css

Html Div宽度扩展,html,css,Html,Css,我遇到了一个问题，div容器被自动设置为页面的全宽，而实际上我只希望它扩展以适应内容。以下是HTML： <!doctype html> <html>  <head> <title>html_blocked_text</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content

我遇到了一个问题，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>

结果（25px和50px）：

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

将

display:inline block

添加到

#container

#container {display: inline-block;}

将

显示：内联块

添加到

#容器

#container {display: inline-block;}

您可以添加

显示：内联块

或

浮动：左

这两种方法都可以避免此问题：

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

您可以添加

显示：内联块

或

浮动：左

这两种方法都可以避免此问题：

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

div

是一个块容器，因此它获取其父元素的宽度，在您的例子中，body元素是页面的全宽

#container {
    display:inline-block;
}

应该为您提供所需的结果

div

是一个块容器，因此它可以获取其父元素的宽度，在您的示例中，body元素是页面的整个宽度

#container {
    display:inline-block;
}

应该为您提供所需的结果

#容器{display:inline block；

，显示：inline
，或显示：inline block
应该可以满足您的需要。容器{display:inline block；
float:left
，display:inline
或display:inline block
应该可以满足您的需求。您赢得了比赛。所以+1@zazu当前位置这不是一场比赛，只是一个问题很简单地回答，有更多相同的答案：-）但你先回答，所以这意味着这是一场比赛，你赢了：）Y你赢了比赛，所以+1@zazu：这不是一场比赛，只是一个简单的问题，答案是相同的：-）但你先回答，这意味着这是一场比赛，你赢了：）