Question

我似乎无法解决这个问题，也许我错过了一些东西，但这是我的HTML：

<style type="text/css"> 
    #loginForm {
        margin: 0;
        padding: 0;
        outline: 0;
    }
</style>

<input id="loginForm" type='text' height="30px" width="20px" /><img id='usernameIcon' src="shipping3.png" width="30px" alt="username" height="30px"/>

基本上，我希望输入框和图像位于彼此旁边。输入框和图像都是相同的高度。我希望它们直接在彼此旁边，但由于某种原因，输入框有一些margin-top，这使得它明显低于图像。这是为什么？

我在Chrome和IE 10上对它进行了测试，输入框有一些优势。我知道我可以正确地将它们与浮子对齐，但是不应该有另一种方法来移除那个＆＃39; margin-top＆＃39;从输入框？

Answer 1

您应该将输入的vertical-align设置为顶部。

input { 
    vertical-align: top;   
    margin: 0;
}

jsFiddle

Answer 2

您需要将vertical-align设置为两个元素的相同值。

height和width attribut对input元素无效。

要保持height范围内的边框，您需要通过box-sizing重置框模型。

<强> DEMO

基本上你的CSS变成了：

input, img {
  vertical-align:middle;/* or whatever else value */
  box-sizing:border-box
}
input {
  height:30px;
  width:20px;
}

澄清输入类型的height和width属性=＆＃34; text＆＃34; ：

引自：http://www.w3.org/wiki/HTML/Elements/input

4.10.5.1.2文本（类型=文本）状态和搜索状态（类型=搜索）

当输入元素的类型属性处于文本状态或搜索状态时，本节中的规则适用。

input元素表示元素值的单行纯文本编辑控件。

文本状态和搜索状态之间的区别主要是风格：在搜索字段与常规文本字段区分开的平台上，搜索状态可能导致外观与平台的搜索字段一致而不是出现像一个普通的文本字段。

如果元素是可变的，则其值应该由用户编辑。用户代理不得允许用户插入＆＃34; LF＆＃34; （U + 000A）或＆＃34; CR＆＃34; （U + 000D）字符成为元素的值。

如果元素是可变的，则用户代理应允许用户更改元素的书写方向，将其设置为从左到右书写方向或从右到左书写方向。如果用户这样做，则用户代理必须运行以下步骤：

Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and "rtl" if the user selected a right-to-left writing direction.

Queue a task to fire a simple event that bubbles named input at the input element.

如果指定了value属性，则其值必须不包含＆＃34; LF＆＃34; （U + 000A）或＆＃34; CR＆＃34; （U + 000D）字符。

值清理算法如下：从值中删除换行符。

以下常见输入元素内容属性，IDL属性和方法适用于该元素：autocomplete，dirname，list，maxlength，minlength，pattern，placeholder，readonly，required和size content attributes; list，selectionStart，selectionEnd，selectionDirection和value IDL属性; select（），setRangeText（）和setSelectionRange（）方法。

值IDL属性为模式值。

输入和更改事件适用。

不得指定以下内容属性，并且不适用于该元素：accept，alt，checked，formaction，formenctype，formmethod，formnovalidate，formtarget，height，max，min，multiple，src，step和width。

以下IDL属性和方法不适用于该元素：checked，files，valueAsDate和valueAsNumber IDL属性; stepDown（）和stepUp（）方法。

报价结尾

Answer 3

您是否已将相关ID添加到输入标记中，以便CSS选择器可以将其定位？

HTML / CSS - 无法删除＆＃39; margin-top＆＃39;从输入框

3 个答案: