输入文本和在同一行

如何使不使用float: left这种效应（跨浏览）提交？

我需要居中此form所以float属性对我来说是错误的。任何人都可以帮忙？

我已经制作了代码，如下所示。

我的代码：

footer input[type=text] { 
    border-top: 1px solid #efefef; 
    border-left: 1px solid #efefef; 
    border-bottom: 1px solid #efefef; 
    border-right: 0; 
    width: 230px; 
    padding: 0 10px; 
    font-size: 16px; 
    line-height: 18px; 
    height: 35px; 
    display: inline-block; 
    float: left; 
    margin: 0 auto; 
} 
footer input[type=submit] { 
    border: 1px solid #df242b; 
    background: #df242b url('../../../gfx/submit.jpg') no-repeat center center; 
    color: #fff; 
    width: 38px; 
    height: 37px; 
    font-size: 18px; 
    line-height: 18px; 
    cursor: pointer; 
    display: inline-block; 
    float: left; 
    margin: 0 auto; 
}

来源

2016-06-28 Piotr Parzentny

有你看着像引导默认的CSS框架，帮助你？风格很容易根据您的需求进行更改，并为您做很多繁重的工作，同时保持所有浏览器的正常工作。 –

我改用UIkit –

因为你想让它跨浏览器和不使用float:left，您可以使用inline-block与vertical-align:top

而对于中心，您需要申请margin:0 auto到footer一些width而不是

我做了一些调整你的代码。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0; 
 
    /* demo */ 
 
    background: lightgreen 
 
} 
 
footer { 
 
    /*fix inlin block gap */ 
 
    font-size: 0; 
 
    margin: 0 auto; 
 
    width: 265px; /* 230px + 35px */ 
 
} 
 
footer input { 
 
    line-height: 18px; 
 
    height: 35px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
footer input[type=text] { 
 
    border: solid #efefef; 
 
    border-width: 1px 0 1px 1px; 
 
    width: 230px; 
 
    padding: 0 10px; 
 
    font-size: 16px; 
 
} 
 
footer input[type=submit] { 
 
    border: 1px solid #df242b; 
 
    background: #df242b url('//dummyimage.com/35x35') no-repeat center center; 
 
    color: #fff; 
 
    width: 35px; 
 
    font-size: 18px; 
 
    cursor: pointer 
 
}

<footer> 
 
    <input type="text"> 
 
    <input type="submit"> 
 
</footer>

来源

2016-06-28 11:36:44 dippas

你不float:left代码实际工作正常。也许你会遇到小屏幕上的换行符。如果是这样的话，就像这个例子一样，为你的页脚添加一段CSS。

footer { 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 

 
footer input[type=text] { 
 
     border: 1px solid #efefef; 
 
     border-right: 0; 
 
     width: 230px; 
 
     padding: 0 10px; 
 
     font-size: 16px; 
 
     line-height: 18px; 
 
     height: 35px; 
 
     display: inline-block; 
 
     margin: 0 auto; 
 
    } 
 
    footer input[type=submit] { 
 
     border: 1px solid #df242b; 
 
     background: #df242b url('../../../gfx/submit.jpg') no-repeat center center; 
 
     color: #fff; 
 
     width: 38px; 
 
     height: 37px; 
 
     font-size: 18px; 
 
     line-height: 18px; 
 
     cursor: pointer; 
 
     display: inline-block; 
 
     margin: 0 auto; 
 
    }

<footer> 
 
    <input type="text" /> 
 
    <input type="submit" /> 
 
</footer>

来源

2016-06-28 11:41:51

使用这样

<style> 
 
body{margin:0;} 
 
footer{ 
 
\t width:100%; 
 
\t background:#ccc; 
 
\t height:250px; 
 
} 
 
.form{ 
 
\t width:292px; 
 
\t margin:0 auto; 
 
} 
 
footer input[type=text] { 
 
    border-top: 1px solid #efefef; 
 
    border-left: 1px solid #efefef; 
 
    border-bottom: 1px solid #efefef; 
 
    border-right: 0; 
 
    width: 230px; 
 
    padding: 0 10px; 
 
    font-size: 16px; 
 
    line-height: 18px; 
 
    height: 37px; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 0 auto; 
 
} 
 
footer input[type=submit] { 
 
    border: 1px solid #df242b; 
 
    background: #df242b; 
 
    color: #fff; 
 
    width: 38px; 
 
    height: 37px; 
 
    font-size: 18px; 
 
    line-height: 18px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 0 auto; 
 
} 
 
</style> 
 

 
<footer> 
 
    <div class="form"> 
 
\t <input type="text"> 
 
\t <input type="submit" value=">"> 
 
    </div> 
 
</footer>

来源

2016-06-28 11:54:54 Mani

输入文本和在同一行

回答

相关问题