Question

所以这个问题有点像我一样。假设我有两个输入字段和一个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/

Answer 1

我相信textarea { overflow: auto; }正是您所寻找的。它会隐藏滚动条，直到有足够的文本需要条形图。这与所有现代浏览器兼容，因此没有跨浏览器格式化问题。 Reference

Answer 2

至于间距将此添加到CSS：

.textarea_x {
    vertical-align: middle;
}

输入和Textarea样式问题

2 个答案: