Question

我正在创建一个电子邮件表单，并希望文本框和提交按钮直接相邻。它们应该接触，使它看起来像一个连续的矩形。

然而，当我让他们触摸并设置高度时，提交按钮不会听！它没有保持相同的高度。如果我单独增加提交按钮高度，则两个框不对齐！

HTML：

<div id="form">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</div>

CSS：

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position: relative;
    height: 25px;
}
#address{
    text-align: right;
    margin: 0 30 0 auto;
}
#btn-submit{
    margin-left: -7px;
    width: 44px;
    text-align: center;
}

Answer 1

关键是float:left输入，然后为它们设置高度。实例：http://jsfiddle.net/NweS6/

#form input{
    border: solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline: none;
    background: #d8d8d8;
    font-weight: bold;
    text-align: right;
    color: #525252;
    float: left;
    height: 25px;
}

#form #btn-submit{
    margin-left: -2px;
    width: 44px;
    text-align: center;
    height: 29px;
}

提交需要比输入高4px的数字的原因是因为由于某种原因它不会将按钮上的边框带入帐户，其顶部和底部加起来为4px。

Answer 2

这是您编写HTML表单的方式：

<form method="POST" action"/page/to_post_to" >
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
</form>

然后其中的元素知道它是form，而不仅仅是div。

编辑：抱歉，我误解了你的问题。我认为倾听意味着行为错误而不是显示错误。

你想要它看起来像跟随？ http://jsfiddle.net/4HcWy/6/

form input
{
    border:2px solid #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    outline:none;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    height: 25px;
    box-sizing: border-box;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    border-right: none;
}
#btn-submit{
    margin-left: -7px;
    width:44px;
    text-align:center;
    border-left: none;
}

（另外，由于我使用了form元素，因此我必须将#form input更改为form input。）*

Answer 3

似乎2个像素无法在输入和按钮上工作，但有1个像素边框，没关系。

看：http://jsfiddle.net/qwLV7/

<强>更新

这似乎有效，但我不得不破解按钮的高度高于输入，

http://jsfiddle.net/qwLV7/1/

更新2

现在怎么样？

http://jsfiddle.net/qwLV7/2/

CSS

#form1
{
    border:solid 2px #989898;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    background: #d8d8d8;
    font-weight:bold;
    color: #525252;
    position:relative;
    width:194px;
}

input{
  height:25px;
  border:0px;
}

#address{
    text-align:right;
    margin:0 30 0 auto;
    float:left;
    width:150px;
}

#btn-submit{
    width:44px;
    text-align:center;
    float:left;
}

HTML

<div id="form1">
    <input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
    <input type="submit" value="BUTTON" id="btn-submit" />
    <div style="clear:both"></div>
</div>

Answer 4

浮动提交按钮，布局将按预期显示。 http://jsfiddle.net/4HcWy/9/

提交按钮CSS不听？

4 个答案: