输入和Textarea造型问题

所以这个问题一直困扰着我。假设我有两个输入字段和一个textarea。出于某种原因，三者之间的间距不一致。第一个输入到文本区域的差距不同于从文本区域到第二个输入字段的差距，不管我设置的边距值是多少。输入和Textarea造型问题

此外，输入字段和textarea上的边框和第一个字符的开头之间的空白不一致，以及应用于每个字体的字体样式不一致。尽管我使用了Eric Meyer的CSS重置，但我仍希望能解决这个问题。

最后一个问题（因为它似乎永远不会结束）是默认情况下textarea有一个滚动条到Internet Explorer中的一侧，我可以通过使用overflow来隐藏：hidden，虽然这会产生明显的问题...是那可能有更清洁的解决方案

HTML

<ul> 
    <li><input type="text" name="title" class="input_x" value="Title" /></li> 
    <li><textarea name="description" class="textarea_x">Description</textarea></li> 
    <li><input type="text" name="title" class="input_x" value="Title" /></li> 
</ul>

CSS

.input_x, .textarea_x { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    padding: 0; 
    width: 100%; 
    border: 1 solid #EEFF00; 
    resize: none; 
    } 

    ul { 
    list-style: none; 
    padding-left: 0; 
    } 

    input { 
    margin: 0; 
    padding: 0; 
    }

http://jsfiddle.net/rY87q/

来源

2013-06-19 tom c

这是你以后：http://jsfiddle.net/j08691/rY87q/1/？ – j08691

是的！这是一个问题解决。非常感谢，男士！ –

我相信textarea { overflow: auto; }是你在寻找什么。它隐藏了滚动条，直到有足够的文本需要该条。这与所有现代浏览器兼容，所以没有跨浏览器格式问题。 Reference

来源

2013-06-19 23:19:04 user2503170

啊太棒了！我认为汽车是默认的... –

至于间距它添加到CSS：

.textarea_x { 
    vertical-align: middle; 
}

来源

2013-06-19 23:48:25 Ruben

输入和Textarea造型问题

回答

相关问题