gpt4 book ai didi

javascript - 消息容器宽度 CSS 问题

转载 作者:太空宇宙 更新时间:2023-11-04 00:10:47 24 4
gpt4 key购买 nike

我试图在我的网页的 top - center 上显示一条消息。我创建了一个非常基本的示例:

http://jsbin.com/eniwax/3/edit

这里的问题在于消息容器。我想将容器宽度设置为等于消息文本宽度意味着(自动,宽度根据消息的大小而变化)。

最佳答案

这样做DEMO

解释:使用一个嵌套的div,使容器div宽度为100%,并给容器div text-align: center;

CSS

.test {
top: 0;
text-align: center;
position: relative;
width:auto;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
display: inline-block;
}

.container {
width: 100%;
text-align: center;
}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="test">I am a sample text</div>
</div>
</body>
</html>

关于javascript - 消息容器宽度 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13135597/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com