Question

我有以下html

<div class="main-conteiner">
    <div class="block">First</div>
    <div class="block">Second</div>
</div>

这个css

.main-conteiner {
  width: 600px;
  margin: 0 auto;
}

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

div {
  margin: 0;
  padding: 0;
}

我需要在同一行中安排div个。但不是这样，它会分为两行。我无法弄清楚我在哪里犯了错误。

DEMO

Answer 1

Demo Fiddle

因为inline-block会考虑HTML中的空格，只需删除两个元素之间的换行符。

修改HTML

    <div class="main-conteiner">
        <div class="block">this is just a div</div><div class="block">this is another div</div>
    </div>

原因是内联元素以与文本相同的方式被有效考虑，新的线/换行分离将始终呈现为白色空间 - 除了2 * 50％之外还将宽度带到大于100％。

Alternative Solution

要停止HTML中的换行符作为附加空格呈现，只需将容器上的font-size设置为0，然后为子div设置font-size，这将意味着渲染空间大小为零，因此没有宽度，因此不会影响宽度计算。

.main-conteiner {
    width: 600px;
    margin: 0 auto;
    font-size:0;
}
.block {
    width: 50%;
    display: inline-block;
    background: red;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size:15px;
}
div {
    margin: 0;
    padding: 0;
}

Answer 2

当您使用display：inline-block时，您应该知道并记住HTML中的任何标签空间都将呈现为空白区域。喜欢在两个单词之间。

避免使用yhis的一种简单方法是将标记的结束括号括起来。的 DEMO

<div class="main-conteiner"> <div class="block">this is just a div</div><div class="block">this is another div</div> </div>

或在
之间插入评论
<div class="main-conteiner"> <div class="block">this is just a div</div><div class="block">this is another div</div> </div>

Answer 3

使用此CSS：

.block {
  width: 50%;
  display: block;
  background: red;
  float:left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

Answer 4

如果您希望div类.block的{{1}}位于同一行，那么只需使用float

.block {
  float:left;
  width: 50%;
  display: inline-block;
  background: red;  
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

Answer 5

将您的父级 font-size:0;和子级定义 font-size:12px定义为，就像您的设计一样

就像这样

.main-conteiner{font-size:0;}
.block{font-size:12px;}

<强> Demo

-------------------

第二个选项是

现在就像这样编写你的HTML代码

<div class="main-conteiner">
  <div class="block">this is just a div</div><!--   --><div class="block">this is another div</div>
</div>

<强> Demo 2

Answer 6

您必须更改.block类

中的一行

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

您可以在此处查看：FIDDLE

Answer 7

.main-conteiner {
  width: 600px;
  margin: 0 auto;
}

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
  float:left;
}

div {
  margin: 0;
  padding: 0;
}

Answer 8

Here is a nice explanation and various other ways to to get rid of it

其中一些与其他人一样，

<div class="main-conteiner">
    <div class="block">this is just a div</div><!-- 
    --><div class="block">this is another div</div>
</div>

或

<div class="main-conteiner">
    <div class="block">
    this is just a div</div><div class="block">this is another div</div>
</div>

或

<div class="main-conteiner">
    <div class="block">this is just a div</div
    ><div class="block">this is another div</div>
</div>

Answer 9

<div class="main-conteiner">
        <div class="block">this is just a div</div><!--
        --><div class="block">this is another div</div>
</div>

注释用于删除DIV之间的空格。

如何制作div内联块？

9 个答案:

Demo Fiddle

Alternative Solution

-------------------