margin-top在内联块形式内无法正常工作

Question

我有一个内部有输入文本类型的表单，我将它放在具有以下代码的select对象前面，但它与select对象没有完全对齐。

              

当我尝试在css中引入margin-top时，如下所示，它会移动选择对象和下面的文本框：

form {
    display: inline-block;
}

.textBox
{
margin-top:50px;
}

请指导我这个问题。

Answer 1

摆脱.textBox的余量，试试这个：

form{display:block;}    
form input{
    display: inline-block; vertical-align:middle;
}

警告：这将对齐所有输入元素，因此如果您有更多元素并且需要它们，则可能需要添加更多声明。如果它只是这两个元素，那么你会没事的

Answer 2

尝试将margin-top:.5em;放在行的样式中：

 <input class="textBox" type="text" value="A random value" style="width:222px;     height:36px; font-size:24px; padding-left:11px;padding-top:2px;color:#666666; margin-top:.5em;">