html - Chrome 内联 block 不起作用

Question

我正在尝试创建一个基本的 HTML 页面布局。该代码在最新版本的 firefox 中运行良好，但在 chrome(v31) 中运行不正常。 问题:Chrome 在第二个 div 之后插入一个换行符。这是 chrome 错误还是我的代码有误？如果它是 Chrome 错误，那么解决方法或修复是什么？

<div class="div-1"></div><div class="div-2"></div><div class="div-3">
    <form>
        <fieldset>
            <label for="uid">Email</label>
            <input type="email" id="email" placeholder="Email">

            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Password">

            <input type="submit" value="Sign In">
        </fieldset>
    </form>
</div>

样式表

@import url("reset.css");
.div-1 {
background-color: green;
height:30px;
width: inherit;
}

.div-2 {
background-color: red;
height: 275px;
width: 752px;
display: inline-block;
}

.div-3 {
background-color: blue;
height: auto;
width: 255px;
vertical-align: top;
display: inline-block;
float: right;
}

FIDDLE

Answer 1

您在 .div-3 上使用了 float: right; 并且它为您的 div 和 display:inline-block 提供了“上下文”； 没用。

.div-1 上的 width: inherit; 也是无用的，因为一个 block 将始终占用其最近父级的所有可用宽度