如何将元素放在同一行答案

【问题标题】：How to put elements to same row如何将元素放在同一行
【发布时间】：2015-12-25 05:26:43
【问题描述】：

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

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

    .horizontalline, .field {
        position: absolute;
    }

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

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

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>

【问题讨论】：

你会称之为 MCVE 吗？
这不是4小时前的同一个问题吗？ - stackoverflow.com/questions/34455552/…
是的，这是完整且最小的示例。它可以保存到文件并在桌面 Chrome 中打开。
你可以在 JSFiddle 或 Stack Snippet 中做到这一点......不是吗？
@Paulie_D 这是不同的。这个问题假设应用了相对布局和 c min-height。您引用的问题询问了不同的方法。

标签： css html

【解决方案1】：

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

display: inline; 或 display: inline-block;（inline-block 使元素出现在一行中，同时保持块级元素的优点）
float: left;

这两个 CSS 规则都必须应用于您想要在一行中显示的所有元素，最好是通过一个相当具体的选择器，例如 .list-element，它会针对具有类 list-element 的所有元素em> 或 #mylist > div 以所有 div 元素为目标，这些元素是 ID 为 mylist 的元素的直接后代。

【讨论】：

现有布局包含硬编码的字段位置和大小。每个字段可能出现在不同的位置。 html 打印表单应该从这些布局创建。答案描述了创建新布局的最佳实践。问题指出应该使用已经存在的布局。所以这个答案不适用于问题。如何修复有问题的测试用例，也许有简单的修复？
使用 <table> 或按照我的解释显示内联元素。如果 HTML 和 CSS 方法都没有帮助，您还想知道什么？