Question

我有两个div标签，每个标签分别配置了以下CSS。我已将宽度更改为100％，并在每个显示屏上添加了阻止功能，但他们仍坚持在移动设备上并排使用。如何在这两个div标签之间强制换行

    <div class="advert-input">
    <input type="text" name="query" placeholder="What are you looking for? ..." value="">
    </div>
    <div class="advert-input">
    <select name="category" style="font-size:18px !important; font-weight:bold;">
    <option value="">All Locations </option>
</select>
</div>

CSS：

.adverts-search .advert-input {
    width: 100%;
    margin: 1.5% 1% 1.5% 1%;
    padding: 0;
    display: block;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

adverts-search .advert-input {
    width: 100%;
    margin: 1.5% 1% 1.5% 1%;
    padding: 0;
    display: block;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Answer 1

float:left会覆盖display:block，修复代码的最简单方法是删除浮动属性，因为它基本上是说＆＃34;尽可能向左移动而不会撞到容器或进入容器另一个浮动的属性，并使用display:inline＆＃34;由于float属性位于display属性之后，因此float属性具有优先级。

到目前为止，最好的解决方案是删除float属性，因为float可以做各种类似的令人沮丧的结果。

Answer 2

只需删除0!，即可将其显示在另一个下方。

两个浮动Div标签之间的换行符

2 个答案: