Question

我需要在CSS中模拟典型纸质表单的外观。它由两列字段组成。每个字段都包含一个字段名称（可变宽度），后跟一个继续到列末尾的下划线。可能会填充该字段，在这种情况下，有一些文本位于该行上方，或者它可能是空白的。如果不清楚，他在manky ASCII艺术中是一个粗略的想法：

Name: _______Foo_______  Age: _____17______
Location: __Melbourne__  Handedness: _Left_

（除了下划线将继续在任何文本下）

为了实现没有文本的下划线，我假设我应该使用border-bottom而不是text-decoration：underline。另外，我需要有边界元素占用完整的可用空间。两者都争论块级元素。但是，我找不到任何方法来获取块级元素（div，li或span设置为display：block或inline-block）与标签保持在同一行。一旦我给它一个宽度：100％，它就是换行符。我尝试了各种花车的组合，我不倾向于做绝对定位荒谬的事情。有什么建议吗？

Answer 1

我有两个解决方案。一个很好，但在IE中不起作用。一个是丑陋的，但似乎无处不在。首先，好的，使用div和css：

<style type="text/css"> 
  .container { width:500px; }
  .field { width:240px; display:table; float:left; }
  .label { white-space:nowrap; display:table-cell; width:1px; } 
  .data { border-bottom: solid 1px black; width="100%";text-align:center; margin-left:10px; white-space:nowrap; display:table-cell; } 
  .row { display:table-row; }
</style> 

<div class="container"> 
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 1</div> 
      <div class="data">data 1</div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 2</div> 
      <div class="data">data 2 </div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 3</div> 
      <div class="data">data 3 </div> 
    </div>
  </div>
  <div class="field"> 
    <div class="row"> 
      <div class="label">label 4</div> 
      <div class="data">data 4 </div> 
    </div>
  </div>
</div>

由于IE不支持table-cell（etc），我们需要一个丑陋的：

<style type="text/css">
  .table-field { width:240px; display:table; float:left; }
  .table-label { white-space:nowrap; } 
  html>body .table-label { width:1px; }  /* force firefox to shrink label to fit text */
  .table-data { border-bottom: solid 1px black; width="100%";text-align:center; white-space:nowrap; } 
</style> 

<div class="container"> 
  <table class="table-field"><tr><td class="table-label">label 1</td><td class="table-data">data 1</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 2</td><td class="table-data">data 2</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 3</td><td class="table-data">data 3</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 4</td><td class="table-data">data 4</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 5</td><td class="table-data">data 5</td></tr></table>
  <table class="table-field"><tr><td class="table-label">label 6</td><td class="table-data">data 6</td></tr></table>
</div>

无论哪种方式，这都需要颜色和边距/填充看起来很好。

Answer 2

我猜你可以单独设置每个元素的宽度 - 我知道它不是一个优雅的解决方案，但比使用javascript更好。

Answer 3

我今天晚上对此进行了一些实验，以下是可能性。您可以为不同的大小制作不同的类。它比单独编码大小要好一些。

Name: <hr class="fieldA" /> Email: <hr class="fieldA" />

CSS：

.fieldA {
    padding-left:120px;
    height:1px;
    display:inline-block;
    margin-bottom:0;
    color:#000000;
    backgound-color:#000000;  
}

CSS中的可变宽度内联下划线效果

3 个答案: