Question

我在我的问题上搜索了答案，但奇怪的是没找到它。我需要在主div内对齐4个div。主div的宽度应为100％，每个内部div应为主div的25％，以便在一行中实现4个相同宽度的div。我的代码是：

html {
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}
.inner-div {
  display: inline-block;
  width: 25%;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div>
  <div class="inner-div blue">
    blue
  </div>
  <div class="inner-div red">
    red
  </div>
  <div class="inner-div green">
    green
  </div>
</div>

由于某种原因，最后一个div与其他div不在同一行。我不明白为什么会这样！请帮忙。

Answer 1

内联元素对代码中的空白区域很敏感。只需删除它。

＆＃13;

html{
  margin:0;
  padding:0;
  width:100%;
}
body{
  margin:0;
  padding:0;
  width:100%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  display:block;
}
.inner-div{
  display:inline-block;
  width:25%;
}
.yellow{
  background-color:yellow;
}
.blue{
  background-color:blue;
}
.red{
  background-color:red;
}
.green{
  background-color:green;
}

＆＃13;

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div><div class="inner-div blue">
  blue
  </div><div class="inner-div red">
  red
  </div><div class="inner-div green">
  green
  </div>
</div>

＆＃13;

Answer 2

如果您不想担心删除代码中的空白区域，可以在font-size: 0;上设置.container并在font-size: initial;上设置.inner-div

＆＃13;

html{
    		margin:0;
    		padding:0;
    		width:100%;
    	}
    	body{
    		margin:0;
    		padding:0;
    		width:100%;
    	}
    	.container{
    		margin:0;
    		padding:0;
    		width:100%;
    		display:block;
            font-size: 0;
    	}
    	.inner-div{
          font-size: initial;
    		display:inline-block;
    		width:25%;
    	}
    	.yellow{
    		background-color:yellow;
    	}
    	.blue{
    		background-color:blue;
    	}
    	.red{
    		background-color:red;
    	}
    	.green{
    		background-color:green;
    	}

＆＃13;

<div class="container">
  <div class="inner-div yellow">
    yellow
  </div>
  <div class="inner-div blue">
    blue
  </div>
  <div class="inner-div red">
    red
  </div>
  <div class="inner-div green">
    green
  </div>
</div>

＆＃13;

Answer 3

这是因为display: inline-block增加了空格。避免这种情况的一种方法是重写它：

<div class="inner-div yellow">
  yellow
</div><!--
--><div class="inner-div blue">
  blue
</div><!--

等

Answer 4

更改此

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
   }

为：

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
}

Answer 5

<html>
    <style>
    	html{
    		margin:0;
    		padding:0;
    		width:100%;
    	}
    	body{
    		margin:0;
    		padding:0;
    		width:100%;
    	}
    	.container{
    		margin:0;
    		padding:0;
    		width:100%;
    		display:block;
    	}
    	.inner-div{
    		display:inline-block;
    		width:25%;
    	}
    	.yellow{
    		background-color:yellow;
			float: left;
    	}
    	.blue{
    		background-color:blue;
			float: left;
    	}
    	.red{
    		background-color:red;
			float: left;
    	}
    	.green{
    		background-color:green;
			float: left;
    	}
    </style>
    <body>
    	<div class="container">
    		<div class="inner-div yellow">
    		yellow
    		</div>
    		<div class="inner-div blue">
    		blue
    		</div>
    		<div class="inner-div red">
    		red
    		</div>
    		<div class="inner-div green">
    		green
    		</div>
        </div>
    </body>
    </html>

Answer 6

改变这个......

.inner-div{
  display:inline-block;
  width:25%;
}

对此...

.inner-div{
  float: left;
  display:block;
  width:25%;
}

Answer 7

因为内联元素呈现为内联，所以浏览器将内部div之间的空格解释为边距。因此，您的html标记遵循以下模式

<div class="container">
   <div class="inner-div yellow">
        yellow
   </div><div class="inner-div blue">
        blue
   </div><div class="inner-div red">
        red
   </div><div class="inner-div green">
        green
   </div>
</div>

或更好的是，你在css中对它们应用负余量：

.inner-div {
  display: inline-block;
  width: 25%;
  margin-right:-5px;
}

Answer 8

确保任何div都没有填充，边距或边框，这会抛弃宽度。

CSS在div内部对齐100％宽度

8 个答案: