Question

我有2个div。一个在另一个里面。外侧的宽度和高度为500px，内侧宽度为auto。我试图将div放在内部，但我也试图让它的宽度为自动。它没有将宽度调整为自动，而是跨越整个外部div的500px。我不确定我做错了什么，所以请看看我的代码：

<style>

#outer {
border: 1px solid black;
width: 500px;
height: 500px;
}
#inner {
border: 1px solid black;
width: auto;
margin: auto;
}

</style>

<div id = 'outer'>

<div id = 'inner'> Inner </div>

</div>

Answer 1

Div是display: block，默认为填充父级的整个宽度。因此，当您将其设置为width: auto时，它会执行默认设置。如果您想使其符合其内容，请将其设置为display: inline-block。由于内联块可以像文本一样居中，因此只需将text-align: center添加到#outer div即可。像这样：

＆＃13;

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  text-align: center;
}
#inner {
  border: 1px solid black;
  display: inline-block;
}

＆＃13;

<div id='outer'>
  <div id='inner'>Inner</div>
</div>

＆＃13;

在内部div，CSS，HTML上将宽度和边距设置为自动

1 个答案: