Question

为什么以下元素并排显示？我可以将左侧更改为width: 29%并且它可以正常工作，但之后会有一个小差距。为什么他们不能加起来100％？有没有解决这个问题？

@media all {
    body,html {
        margin:0; padding:0;
    }
    #content {
        position: absolute;
        width: 8.5in;
        left: 50%;
        margin:  0 0 0 -4.25in;
        padding: 0;
    }
    #left {
        width: 30%;
        display: inline-block;
        background-color: lightgray;
    }
    #right {
        width: 70%;
        display: inline-block;
        background-color: cornflowerblue;
    }
}

<body>
    <div id="content">
        <span id="left">
            left
        </span>
        <span id="right">
            right
        </span>
    </div>
</body>

Answer 1

因为内联元素对代码中的空格很敏感。所以只需删除它。

body,
html {
  margin: 0;
  padding: 0;
}

#content {
  position: absolute;
  width: 8.5in;
  left: 50%;
  margin: 0 0 0 -4.25in;
  padding: 0;
}

#left {
  width: 30%;
  display: inline-block;
  background-color: lightgray;
}

#right {
  width: 70%;
  display: inline-block;
  background-color: cornflowerblue;
}

<div id="content">
  <span id="left">
            left
        </span><span id="right">
            right
        </span>
</div>

Answer 2

它是元素之间的空间。您可以为容器设置font-size: 0;并为子项设置所需的大小：

http://codepen.io/themeler/pen/yMENgZ

#content {
    font-size: 0;
}
#left {
    font-size: 18px;
}
#right {
    font-size: 18px;
}

如果您不想重新设置字体大小，请使用float。

Answer 3

<div id="content">
        <span id="left">
            left
        </span>
        <span id="right">
            right
        </span>
    </div>   



 #left {
            width: 30%;
            display: inline-block;
            background-color: lightgray;
            float:left;
        }
        #right {
            width: 70%;
            display: inline-block;
            background-color: cornflowerblue;
            float:left;
        }

Fiddler https://jsfiddle.net/d0r81820/

内联块，并排内容持有者和100％宽度的麻烦

3 个答案: