gpt4 book ai didi

html - 如何使CSS文本框适合内容?

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

我的 CSS:

<style type="text/css">
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(images/angel-beats-bg1.jpg);
background-repeat: no-repeat;
margin: auto;
width: auto;
height: auto;
display: table;
text-align:center;
}
.TextBOx {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: #solid 30px #000;
background-color: rgba(105,100,100,0.8);
width:auto;
height:auto;
margin: 0;
display:block;
}
</style>

让这张图说明一切: enter image description here

我希望那个半透明文本框的边框能够自动适应该内容。我怎么做 ?我试过 position:fixed; 但它搞砸了我的页面。

我的完整脚本:

<style type="text/css">
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url(images/angel-beats-bg1.jpg);
background-repeat: no-repeat;
margin: auto;
width: auto;
height: auto;
display: table;
text-align:center;
}
.TextBox {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: #solid 30px #000;
background-color: rgba(105,100,100,0.8);
width:auto;
height:auto;
margin: 0;
z-index:-1;
display:block;
text-align:center;
position:relative;
}
</style>
<body>
<img src="images/header.png" alt="OpenWrt Gratisan"><br>
<strong>
<p>
<a href="status.php" title=""><font color="red">Status</font></a> |
<a href="wget.php" title=""><font color="red">Wget WebUI</font></a> |
<a href="putty.html" title=""><font color="red">Terminal</font></a> |
<a href="wifi.php" title=""><font color="red">WIFI</font></a> |
<a href="ch_pass.php" title=""><font color="red">Password</font></a> |
<a href="profile.php" title=""><font color="red">Profile</font></a> |
<a href="vpn.php" title=""><font color="red">Accounts</font></a> |
<a href="ussd.php" title=""><font color="red">USSD</font></a> |
<a href="sms_in.php" title=""><font color="red">Inbox SMS</font></a> |
<a href="sms_send.php" title=""><font color="red">Send SMS</font></a> |
</p>
<p>
<a href="vpn_log.php" title=""><font color="red">VPN log</font></a> |
<a href="restart_log.php" title=""><font color="red">Restart Log</font></a> |
<a href="wget_log.php" title=""><font color="red">Wget Log</font></a> |
<a href="dial_log.php" title=""><font color="red">Dial Log</font></a> |
<a href="about.php" title=""><font color="red">About</font></a>
</p>
</font></strong>
<br><br><br>
<div class="TextBox">';
MY CONTENT GOES HERE
</div>
.....

最佳答案

解决方法是设置为display: inline-block

引自:How to make div not larger than its contents?

您可以通过在父元素上设置 text-align: center; 使其居中。

(还要检查该元素上是否有任何填充)

PS:养成发布一些代码或 fiddle 的习惯,更容易获得问题的上下文

关于html - 如何使CSS文本框适合内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27848104/

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