Question

下面的html5订单打印表单是从包含固定布局字段的现有模板创建的。每个字段都显示在单独的行中：

如何解决这个问题，以便字段出现在同一行？我尝试使用绝对位置修复它：

    .horizontalline, .field {
        position: absolute;
    }

在这种情况下，elemts apper正确排序，但拉伸产品描述字段会覆盖下一行产品名称字段：

如何解决这个问题？属性，风格可以改变。可以添加其他元素。

Html基础结构（行元素包含0或1个字段元素）最好可能不会改变，因为没有更好的方法来渲染绝对定位的单独字段，而不是现有的非html模板。

测试用例：

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .row {
      position: relative;
      clear: both;
    }
    .field {
      overflow: hidden;
      word-break: break-all;
    }
    .horizontalline {
      font-size: 1pt;
      border: 1px solid #000000;
    }
    .horizontalline,
    .field {
      position: relative;
    }
    .horizontalline {
      border-bottom-style: none !important;
    }
  </style>

</head>

<body>
  <div class='row' style='min-height:0.05cm;'>
    <div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:1.26cm;width:0.71cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>1</div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:2.05cm;width:8.47cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>HP ProDesk 490 G3 - Micro tower - 1 x Core i7 6700</div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:10.58cm;width:1.68cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>31.12.2015</div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:12.24cm;width:0.79cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>1</div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:13.08cm;width:1.08cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>tk</div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'></div>
  </div>
  <div class='row' style='min-height:0.00cm;'>
  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>1189</div>
  </div>
  <div class='row' style='min-height:0.42cm;'>
    <div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1189</div>

  </div>
  <div class='row' style='min-height:0.51cm;'>
    <div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M / HD Graphics 530 - GigE - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>

  </div>

  <div class='row' style='min-height:0.05cm;'>
    <div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>

  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:1.26cm;width:0.71cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>2</div>


  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:2.05cm;width:8.47cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>24x7 monitor: LG 32SL5B</div>


  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:10.58cm;width:1.68cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>29.12.2015</div>


  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:12.24cm;width:0.79cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>3</div>


  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:13.08cm;width:1.08cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>tk</div>

  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>878,79</div>

  </div>
  <div class='row' style='min-height:0.00cm;'>

  </div>
  <div class='row' style='min-height:0.00cm;'>
    <div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>580</div>

  </div>
  <div class='row' style='min-height:0.42cm;'>
    <div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1740</div>

  </div>
  <div class='row' style='min-height:0.51cm;'>
    <div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>450cd/m2, HDMI / DP / DVI / RGB / RJ45 /etc, 24/7 Operation, laos</div>

  </div>
  <div class='row' style='min-height:0.05cm;'>
    <div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>

  </div>
</body>

</html>

Answer 1

首先，我建议您特别阅读一些基本的HTML表格。要在一行中显示元素而不对html进行任何更改，有两种方法：

process.env.PWD或undefined（display: inline;使元素显示在一行中，同时保留了块级元素的好处）
display: inline-block;

两个CSS规则都必须应用于要在一行中显示的所有元素，最好是由inline-block之类的特定选择器应用，它将使用类 list-element定位所有元素或float: left;定位所有.list-element个元素，这些元素是ID为#mylist > div的元素的直接后代。

如何将元素放到同一行

1 个答案: