问一个超级新手的问题,关于css百分比

l_rain

42965266

发布于
2016-11-04

一个DIV里放4个子元素，每个子元素宽度为25%，为什么4个子元素不能显示在一行？第4个会换行,margin、padding、border都设置成0了啊，为什么会出现这种结果？

css

阅读 3.5k

8 个回答

得票最新

shockw4ver

1k1311

发布于
2016-11-04

✓ 已被采纳

在你的html文档结构中这4个元素是不是没有写在一行，浏览器会将换行符解析进去，成为这个空隙，加浮动或者去掉换行符可以解决这个问题。

body {
    height: 100%;
    width: 100%;
}

div {
    display: inline-block;
    width: 25px;
    height: 100%;
}

<body>
    <div>1</div><div>2</div><div>3</div><div>4</div>
</body>

这样应该就行了。

orange

4.5k1614

发布于
2016-11-04

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    div {
      display: inline-block;
      width: 25%;
      background-color: green;
    }
  </style>
</head>

<body>

<div>1</div><div>2</div><div>3</div><div>4</div>

</body>
</html>