为什么我的输入不对齐？

我需要一些帮助。我是新的CSS，所以我不知道为什么我的输入“textarea”不垂直与其他输入对齐？它更1或2像素向右......为什么我的输入不对齐？

这里是我的jsfiddle： http://jsfiddle.net/uxpedro/tDxc5/14/

form{ 
width:255px; 
height:266px; 
margin: 0 auto; 
margin-top:200px; 
} 


input[type=text]{ 
    font-family:verdana; 
    width:250px; 
    height:40px; 
    padding-left:5px; 
    background-color:rgba(255,255,255,0.95); 
    border-style:none; 
} 

textarea{ 
    font-family:verdana; 
    margin-top:30px; 
    max-width:250px; 
    min-width:250px; 
    min-height:100px; 
    max-height:200px; 
    background-color:rgba(255,255,255,0.95); 
    border-style:solid; 
    border-color:rgba(215, 40, 40, 0.9); 
} 

input[type=submit]{ 
    margin-top:-3px; 
    width:250px; 
    height:40px; 
    color:white; 
    background-color:rgba(215, 40, 40, 0.9); 
    border-style:none; 
    }

来源

2014-06-21 Pedro F.

您有'margin-top：30px;'设置为'textarea'。将其更改为'margin-top：4px;' – tsHunter

对不起，我不是非常具体，我的意思是垂直对齐，“textarea”更向右或向右移动2px ... –

我发现问题是你的textarea上的边框，它不是提交按钮不够宽，而是textarea上的额外宽度。

在样式化网站时请记住盒子模型。

这里有一个更新的小提琴，我很抱歉，如果我搞砸了太多与它，我只是想更简单为您：http://jsfiddle.net/tDxc5/16/

尝试设置形式红色的背景，这样你可以看到一切现在是窗体的宽度（我认为这是你想干什么。）

几件事情：

我删除了一切，但形式，所以你可以很容易地阅读。

要注意的一个规则是box-sizing: border-box; - 它通常会计算您为元素设置的填充，因此如果宽度为200px且填充为10px，则它将变为220px，因为您将填充设置为10px 。使用该规则，它将知道从原始宽度取20px以使其适合您实际设置的内容。

我用/>关闭了你的输入，因为jsfiddle告诉我，你不必这样做。

使用placeholder=""，而不是value="" - 如何风格占位符：http://css-tricks.com/snippets/css/style-placeholder-text/

在这些情况下，你做了你应该真的不使用高度，为textarea的目的，我添加了一个resize: vertical;，以确保它不能去出于表单元素。

希望这会有所帮助！

来源

2014-06-21 23:13:31

Chrome浏览器的用户代理样式表（又名浏览器的“默认CSS样式”）规定，对文本区域，2px的边距。由于您只声明margin-top属性，因此您可以从检查员处看到（通过右键单击文本区域并选择Inspect element），剩余的三个边距仍设置为2px。

为了让它与其他对齐，只需将margin-top:30px替换为margin:30px 0 0即可。

来源

2014-06-21 22:47:17 bardo

为什么我的输入不对齐？

回答

相关问题