这是我的html文件
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
width: 1000px;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>我的问题是如何对齐框div对齐中心(水平)响应(动态)，以及如何使这个网页响应当我检查这个页面的响应性时，它没有显示响应性
试试下面的代码:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>.box {
width: 1000px;
}
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
您也可以在div框中使用display: flexbox;和justify-content: center;来获得几乎相同的结果
下面是我认为可以工作的代码，如果你想使用flexbox:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
display: flexbox;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>注意我在第一种方法中使用了max-widht: 1000px;，您可以根据需要更改。
修改
.box{
max-width: 1000px;
width:100%;
margin:0 auto;
}
使用这个，但条件是你的父div有100%的宽度(窗口宽度)。
或flex
的另一种使用方式
form{
width: 200px;
margin: auto;
}<body>
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here">
<button type="button">Search</button>
</form>
</div>
</body>
您可以遵循下面的代码。我试着给出一些解释，我改变了，为什么我这样做
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 0px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
/*if you want to take result as a responsive then you need to add width as % not fixt size */
width: 100%;
text-align: center;
margin: 0 auto;
}
/*This div for form responsive */
.search-form{
width: 90%;
text-align: center;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 70%; /* I change here for px to % base one your requerment */
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
float: left; /* I change here for div assign as a left */
}
button {
position: relative;
border-radius: 0 25px 25px 0;
width: 30%; /* I change here for px to % base one your requerment */
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
float: left; /* I change here for div assign as a left */
}<h1>This is my page title...</h1>
<div class="box">
<div class="search-form">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
</div>display: blockfix需要在css中插入这两个block
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
工作小提琴
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>如果你很好去flexbox的实现，你可以包装你的.box在flex和justify-content: center;有一个水平对齐。
为flexbox添加以下更新
.box {
display: flex;
justify-content: center;
}
工作弹性小提琴
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
display: flex;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>请注意在这两个示例中，我都使用max-width: 1000px;代替.box。这是为了确保ui在运行过程中不会失败。你可以根据你的需要更新。