輸入文本和在同一行

如何使不使用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

輸入文本和在同一行

回答

相關問題