HTML/CSS - 无法从输入框

我似乎无法弄清楚这一点，也许我失去了一些东西去掉 '的margin-top'，但这是我的HTML：HTML/CSS - 无法从输入框

<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"/>

基本上，我希望输入框和图像在彼此旁边。输入框和图像高度相同。我希望它们直接放在海誓山盟旁边，但由于某种原因，输入框有某种边缘顶部，这使得它显着低于图像。为什么是这样？

我在Chrome和IE 10上测试了这个，并且在这两个输入框上都有一些边距。我知道我可以将它们与花车正确对齐，但是不应该有另一种方法从输入框中删除'margin-top'？

来源

2014-07-21 user2719875

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

height和width attribut对于input元素无效。

要保持给定的边界在height之内，您需要通过box-sizing重置箱型号。

DEMO

Basicly你的CSS变成是：

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

为了澄清有关height和width属性输入型= “文本”：从

报价：http://www.w3.org/wiki/HTML/Elements/input

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

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

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

文本状态和搜索状态之间的区别主要是文体上的：在搜索字段与常规文本字段不同的平台上，搜索状态可能会导致与平台搜索字段一致的外观，而不是像常规文本域。

如果元素是可变的，它的值应该由用户编辑。用户代理不允许用户在元素的值中插入“LF”（U + 000A）或“CR”（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属性，如果指定，则必须有一个不包含“LF”（U + 000A）的值或“CR”（ U + 000D）字符。

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

以下常用输入元素内容属性，IDL属性和方法适用于元素：自动完成，目录名，列表，最大长度，最小长度，模式，占位符，只读，必需和大小内容属性; 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（）方法。报价

来源

2014-07-21 20:03:39

我需要给img一个box-sizing：border-box，或者它不是必需的吗？对我来说，它只是在输入一个框的大小：边框 – user2719875

顺便说一下，在这里：http：//www.w3schools.com/tags/att_input_height.asp它给输入元素的宽度和高度。如果您可以向我发送无效的文档，可以吗？ – user2719875

它只是不起作用，这对我来说很好，告诉它不是相关/有效的方式。除此之外，如果有一个我不信任的网站，它就是W3schools，与w3C没有任何关系，并且有太多过时的，过时的页面:) –

您应该将输入的vertical-align设置为最高。

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

jsFiddle

来源

2014-07-21 20:02:21 Tomzan

的

末你相关的ID添加到您输入的标签，以便它可以通过你的CSS选择器如何定位？

来源

2014-07-21 20:03:41 malan

HTML/CSS - 无法从输入框

回答

相关问题