Question

这是我的代码：

我使用一些公司品牌名称和右边的几个按钮构建搜索栏，搜索栏位于中间。

我希望当我们减少到786px宽度（屏幕）然后搜索栏（从“搜索：”到按钮“Go！”）继续到下一行。但我的代码没有按预期工作。怎么了？

提前谢谢！

HTML

<!DOCTYPE html>
<html>
<head>
 <title>test5</title>
 <link rel="stylesheet" type="text/css" href="test5.css">
</head>
<body>

 <div class="center">
 <div class="qwert" id="abc1">
    <a id="Home" href="www.bookavanue.com"><b>Brand</b></a>
 </div>
 <div class="qwert" id="abc3">
    <button id="Register" type="button">Register</button>
    <button id="Login" type="button">Log In</button>
    <button id="Cart" type="button">Cart</button>
 </div>
 <div class="qwert" id="abc2">
    <div id="abcd1">
        <label for="Search">Search by:</label>
            <select value="Title">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select>
            <select value="All Books">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select> 
    </div>
    <div id="abcd2">
        <input id="Search" type="text" name="Search your book" 
        placeholder="Search Your Books...">
    </div>
    <div id="abcd3">
        <button id="Go" type="Search">Go!</button>
    </div>
</div>
</div>
</body>
</html>

CSS

#abc1{
 float: left;
 width: 110px;
}
#abc3{
 float: right;
 width: 185px;
 text-align: right;
}
#abc2{
 display: block;
 width: auto;
}
#abcd1{
 float: left;
 width: 220px;
}
#abcd3{
 float: right;
 width: 40px;
 text-align: right;
}
#abcd2{
 width: calc(100% - 270px);
 display: inline-block;
}
input{
 width: 100%;
}
@media screen and (min-width: 786px){
 #abc2{
    width: calc(100% - 295px);
    display: inline-block;
 }
}

Answer 1

在您的abc2元素clear:both

上添加fiddle属性....

  #abc2.qwert{
    clear:both;
  }

display：block css在div元素中不起作用？

1 个答案: