[分享]css不浮动怎么设置宽度自适应

在CSS的布局中，浮动是常用的一种方法，但是并不是每一个元素都需要浮动。有些元素如果不浮动，但又需要设置宽度自适应的效果怎么办呢？这时候，我们可以使用“display: inlineblock”样式来...

在CSS的布局中，浮动是常用的一种方法，但是并不是每一个元素都需要浮动。有些元素如果不浮动，但又需要设置宽度自适应的效果怎么办呢？

这时候，我们可以使用“display: inline-block”样式来实现。具体的方法是，在要设置宽度自适应的元素上添加“display: inline-block”样式，然后在父元素上添加“text-align: center”样式，就可以实现宽度自适应并居中的效果了。

/* HTML代码 */
<div class="parent">
  <div class="child">我是子元素</div>
</div>

/* CSS代码 */
.parent {
  text-align: center;
}

.child {
  display: inline-block;
  /* 这里可以添加其他样式 */
} 

我们通过给子元素添加“display: inline-block”样式，使其以行内块的形式显示，并且可以设置宽度自适应。然后在父元素上添加“text-align: center”样式，让子元素水平居中。

另外，我们还可以在子元素上添加“vertical-align: middle”样式，让其垂直居中。

.child {
  display: inline-block;
  /* 这里可以添加其他样式 */
  vertical-align: middle;
} 

总的来说，不浮动但又需要设置宽度自适应的元素，可以使用“display: inline-block”样式来实现。通过在父元素上添加“text-align: center”样式，让子元素水平居中，再加上“vertical-align: middle”样式，让其垂直居中，就可以达到自适应且居中的效果。