如何使 css 文本框适合内容？

Question

我的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>

就让这张图说明一切吧：

我希望半透明文本框的边框能够自动适应该内容。我怎么做？我试过 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>
.....

Answer 1

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

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

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

（还要检查该元素上是否有任何填充）

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

Answer 2

只需将您的内容放在宽度为 100% 的 DIV 中，然后将其放在 DIV.TextBox 元素中（同时注意拼写错误 - 您有一些）。这个新的 DIV 将填充父元素的 100% 宽度。

<div class="TextBox">
    <div style="width: 100%; ">
        MY CONTENT GOES HERE
    </div>
</div>

关于居中，将 text-align: center 添加到 .TextBox class。还有其他方法可以使 div 居中，例如 margin: 0, auto ... 但在你的情况下坚持使用 text-align: center.

.TextBox{
    text-align: center;
}

如何使 css 文本框适合内容？

How to fit css textbox to content?

html

css