gpt4 book ai didi

html - Div 自动 100% 宽

转载 作者:行者123 更新时间:2023-11-28 16:09:41 28 4
gpt4 key购买 nike

我有一个简单的问题。为什么 a 不会自动调整其内容的大小?像这样:

<html>

<div style="margin:auto; background:red;">Test</div>

</html>

返回 width:100%,尽管我希望“Test”这个词简单地居中。有什么想法吗?

最佳答案

您的问题与 HTML 的基础知识有关。有block elementsinline elements . block 级元素,就其本质而言,将始终占据其包含元素的整个宽度。改变这一点的唯一方法是通过 CSS。

如果您希望用边框或背景色来换行一个单词,并且只有这样才有效,那么您需要使用内联元素。例如:

div,
span {
border: 1px solid blue;
}
<div>Test</div>
<span>Test</span>

关于使用 margin: 0 auto 的问题以及为什么它不居中是因为你需要指定一个宽度。要使全宽 DIV 的文本居中,您需要应用 text-align: center;。这样您就不必担心可变文本长度。

div {
text-align: center;
}
<div>
Test
</div>

如果您想要设置单个单词的样式并将其置于 DIV 中心,请查看以下代码段:

div {
text-align: center;
}
span {
border: 1px solid blue;
}
<div>
<span>Test</span>
</div>

另一种选择是,如果您希望居中文本仅占据包含元素的大部分但仍居中,您可以这样做:

.wrap {
width: 50%;
margin: 5px auto;
border: 1px solid blue;
text-align: center;
}
<div>
<div class="wrap">
Test
</div>
<div class="wrap">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>

关于html - Div 自动 100% 宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30198010/

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