Question

<div id="row2">
<input type="text">
<input type="text">
</div>

input
{
    float: left;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #E4E2D6;
    border-collapse: collapse;
    border-color: #DDDBCF #EAE9E0 #E2E0D4 #DDDBCF;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 2px;
    color: #959494;
    font-family: georgia;
    font-size: 1.6em;
    height: 40px;
    margin: 1%;
    padding-left: 10px;
    width: 48%;
}

在fiddle

中更新了相同内容

这适用于firefox ...但是使用chrome，它会转到新行。

Answer 1

您为mozilla提供了样式，但没有chrome

现在chrome正常工作。

input
{
    float: left;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #E4E2D6;
    border-collapse: collapse;
    border-color: #DDDBCF #EAE9E0 #E2E0D4 #DDDBCF;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 2px;
    color: #959494;
    font-family: georgia;
    font-size: 1.6em;
    height: 40px;
    margin: 1%;
    padding-left: 10px;
    width: 48%;
}

在小提琴中更新了相同的内容。 fiddle updated

Answer 2

添加此

-webkit-box-sizing：border-box

Answer 3

您需要确保填充不会将框扩展到超过您使用宽度和填充所做的100％。使用传统的盒子模型填充物被添加到宽度而不是结合到其中。使用“border-box”，这可以解决，并且在所有现代浏览器和IE8 +中都受支持，并且可以为旧版IE填充。

您无需再添加供应商前缀，但我已添加了您在下面缺少的webkit。

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Answer 4

喜欢这个的 demo

<强> CSS

input { float: left; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; -moz-box-sizing: border-box; background-color: #E4E2D6; border-collapse: collapse; border-color: #DDDBCF #EAE9E0 #E2E0D4 #DDDBCF; border-image: none; border-radius: 4px; border-style: solid; border-width: 2px; color: #959494; font-family: georgia; font-size: 1.6em; height: 40px; margin: 1%; padding-left: 5px; width:47%;

Answer 5

使用此css

-webkit-box-sizing: border-box
float: left;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: #E4E2D6;
border-collapse: collapse;
border-color: #DDDBCF #EAE9E0 #E2E0D4 #DDDBCF;
border-image: none;
border-radius: 4px;
border-style: solid;
border-width: 2px;
color: #959494;
font-family: georgia;
font-size: 1.6em;
height: 40px;
margin: 1%;
padding-left: 10px;
width: 48%;

我无法在Chrome中将两个输入彼此相邻，而不是在同一行

5 个答案: