1

我设计了一个文本区域，使它看起来像三个独立的文本输入框。出于样式目的，需要有一条黑线分隔每行文本。

但是，我不知道如何对齐文本，使它们感觉在各自的部分居中。任何人都可以伸出援助之手吗？

jsfiddle 示例

HTML

<div id="formPage">
   <div id="formBox">
      <div class="formSection" style="border:1px solid black;">
          <div class="formLine" style="height:49px;position:relative;">
          <div class="indent">This is a needed label that I put over the textarea that describes what people are filling out.</div>
          <div class="whiteIndent"></div>
          <div class="borderIndent"></div>
          <div class="whiteIndent2"></div>
          <div class="borderIndent2"></div>
          <textarea name="text1" class="indent" rows="3" maxlength="360"></textarea>
      </div>
   </div>
</div>

CSS

* { }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#formPage {
  font-family: 'Arial Narrow', Arial, sans-serif;font-size:13px;
  background:#fff;
  border: 1px solid #d8d8d8;
  border-bottom-width: 2px;
  border-top-width: 0;
  width:910px;
  margin:0 auto;
  padding:30px;
  height:100px;
 }

.formLine > textarea.indent { 
   position:absolute;
   font-family: 'Arial Narrow', Arial, sans-serif;
   font-size:13px;
   background-color:#E2F4FE;
   width:818px;
   z-index:0;
   top:0px;
   padding: 0;
   outline: 0;
   border:0;
   resize:none;
   overflow:hidden;
   box-sizing: border-box;
  }
  .formLine > div.indent { position:absolute;z-index:2;top:0;background-color:#fff;padding:2px 2px 2px 1px; }
  .formLine > div.whiteIndent { position:absolute;z-index:2;top:16px;width:820px;height:3px;background-color:#fff; }
  .formLine > div.borderIndent { position:absolute;z-index:2;top:17px;left:0;border-top:1px solid #000;width:823px;height:1px; }
  .formLine > div.whiteIndent2 { position:absolute;z-index:2;top:32px;width:820px;height:3px;background-color:#fff; }
  .formLine > div.borderIndent2 { position:absolute;z-index:2;top:33px;left:0;border-top:1px solid #000;width:823px;height:1px; }

  .formSection { float:left;width:825px;border-right:2px solid #000;border-bottom:1px solid #000;font-size:13px;}
4

1 回答 1

0

不确定您到底在寻找什么。你还想要白色的位子吗？如果您详细说明，我可以相应地修改我的答案。这是一个可能的解决方案：

http://jsfiddle.net/rY9um/1/

.formLine > textarea.indent { 
  margin: 0;
  line-height: 17px;
}

.formLine > div.indent { 
  /* remove padding:2px 2px 2px 1px; from css - you can use line-height to achieve the same effect and consistency */
  line-height: 17px; 
  }

设置line-height为您希望每行文本占据的高度。这允许您设置较小的字体大小（13 像素），同时使文本行仍然占据 17 像素的高度。

（在一个稍微不相关的注释中，清理你的 CSS 并使用更好的命名约定将帮助你更好地理解它。例如，实际上没有必要通过 调用 textarea .formLine > textarea.indent。你可以简单地给它一个类.textarea-indent并用它来调用它。请参阅编写高效的 CSS 选择器）

于 2013-11-08T17:22:30.560 回答