Question

我正在尝试创建基本的HTML页面布局。代码在最新版本的firefox中工作正常，但不是在chrome（v31）中。问题：Chrome在第二个div之后插入换行符。这是一个chrome bug还是我的代码错了？如果它是一个chrome bug，那么解决方法或修复方法是什么？

<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

您在float: right;上使用了.div-3，它为您的div提供了'上下文'，display:inline-block;无效。

width: inherit;上的.div-1也没用，因为一个块总是会占用他最近的父级的所有可用宽度

Chrome内联块无效

1 个答案: